Popover _ Ark UI.html•505 kB
<!DOCTYPE html>
<!-- saved from url=(0042)https://ark-ui.com/docs/components/popover -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Popover | Ark UI</title><meta name="description" content="An overlay that displays additional information or options when triggered."><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="keywords" content="Headless,Components,Library,React,Solid,Vue"><link rel="manifest" href="https://ark-ui.com/app.webmanifest"><link rel="sitemap" href="https://ark-ui.com/sitemap-index.xml"><!-- Icons --><link rel="icon" href="https://ark-ui.com/favicon.svg" type="image/svg+xml" sizes="any"><link rel="icon" href="https://ark-ui.com/favicon.ico" type="image/x-icon" sizes="32x32"><link rel="apple-touch-icon" href="https://ark-ui.com/apple-icon.png" type="image/png" sizes="180x180"><!-- OpenGraph --><meta property="og:url" content="https://ark-ui.com/"><meta property="og:locale" content="en_US"><meta property="og:type" content="website"><meta property="og:description" content="A headless component library for building reusable, scalable design systems that works for a wide range of JS frameworks."><!-- Twitter --><meta name="twitter:card" content="summary"><meta name="twitter:creator" content="@ark_ui_"><meta name="twitter:description" content="A headless component library for building reusable, scalable design systems that works for a wide range of JS frameworks."><!-- Tracking --><script defer="" data-domain="ark-ui.com" src="https://plausible.io/js/script.js" data-astro-exec=""></script><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><link rel="stylesheet" href="./Popover _ Ark UI_files/_slug_.HPOWd1E2.css">
<style>@keyframes astroFadeInOut{0%{opacity:1}to{opacity:0}}@keyframes astroFadeIn{0%{opacity:0}}@keyframes astroFadeOut{to{opacity:0}}@keyframes astroSlideFromRight{0%{transform:translate(100%)}}@keyframes astroSlideFromLeft{0%{transform:translate(-100%)}}@keyframes astroSlideToRight{to{transform:translate(100%)}}@keyframes astroSlideToLeft{to{transform:translate(-100%)}}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}[data-astro-transition-scope]{animation:none!important}}
</style><script type="module" src="./Popover _ Ark UI_files/hoisted.SGOq3gnz.js" data-astro-exec=""></script></head> <body> <header class="bg_bg.default d_flex flex_column left_0 pos_fixed right_0 top_0 z_sticky"> <nav role="navigation" class="pos_sticky top_0 z_sticky bg_bg.default"> <div class="border-bw_1px pos_relative"> <div class="pos_relative w_100% mx_auto px_4 md:px_6"> <div class="d_flex items_center justify_space-between gap_8 flex_row h_18"> <div class="d_flex items_center gap_10 flex_row"> <a href="https://ark-ui.com/" aria-label="Back to Home"> <svg height="28" viewBox="0 0 63 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_901_179)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.07455 11.5775C9.21266 11.1733 9.35082 10.7689 9.48904 10.3643C9.64944 9.8968 9.80558 9.44041 9.96157 8.98444L9.97953 8.93194C10.0327 8.77661 10.0858 8.62127 10.1388 8.46593C10.3495 7.84944 10.5601 7.23296 10.7744 6.6177C10.7763 6.61225 10.7782 6.60648 10.7802 6.60048C10.8003 6.54059 10.8278 6.45874 10.8969 6.45874C10.9642 6.45874 10.9919 6.53319 11.0132 6.59071C11.016 6.59812 11.0186 6.60525 11.0212 6.6119C11.084 6.77175 11.1405 6.93408 11.197 7.09641C11.2174 7.15501 11.2378 7.2136 11.2585 7.27208C11.418 7.72322 11.5776 8.17435 11.7372 8.62548C12.2869 10.1792 12.8365 11.7329 13.3858 13.2867C13.511 13.641 13.4621 13.707 13.0802 13.707C12.8417 13.707 12.6032 13.707 12.3647 13.707C11.3032 13.707 10.2418 13.707 9.18038 13.7077C9.13956 13.7078 9.09874 13.7121 9.05372 13.717C9.03136 13.7194 9.00796 13.7219 8.98301 13.7241L12.6148 24L12.6531 23.9938V19.5735H21.8947C21.887 19.5488 21.8805 19.5271 21.8745 19.5073C21.8632 19.4702 21.8541 19.4401 21.8437 19.4104C21.5622 18.6035 21.2807 17.7967 20.9991 16.9898C19.5087 12.7185 18.0183 8.44713 16.5307 4.17479C16.4829 4.0375 16.4169 3.99982 16.274 4C13.2227 4.00385 10.1713 4.00375 7.11986 4.00364C6.5828 4.00362 6.04573 4.0036 5.50866 4.00361L5.30127 4.00361L0 19.716L0.215452 19.716C0.631264 19.716 1.04708 19.7159 1.46289 19.7158C2.99697 19.7153 4.53106 19.7149 6.06512 19.7204C6.24167 19.7211 6.31584 19.6699 6.3727 19.5023C7.26885 16.8622 8.17034 14.2238 9.07455 11.5775ZM33.914 4C35.7783 4 37.5489 4.26803 38.8634 5.01851C40.2032 5.78342 41.0475 7.03904 41.0475 8.926C41.0475 10.1194 40.5583 11.1908 39.6868 11.9351C39.3349 12.2356 39.3611 12.9687 39.7035 13.28C39.7574 13.329 39.8092 13.3801 39.8587 13.4334C40.3694 13.9826 40.6094 14.7223 40.6094 15.6382V17.4035C40.6094 18.0283 40.614 18.5945 40.8783 19.1377C40.9775 19.3416 40.829 19.579 40.6023 19.579H35.2961C35.1816 19.579 35.0765 19.5156 35.023 19.4144C34.8005 18.9935 34.7109 18.3312 34.7109 17.4446V16.2746C34.7109 15.7898 34.6036 15.4616 34.3689 15.2452C34.1275 15.0226 33.6866 14.8578 32.8765 14.8578H29.7671C29.491 14.8578 29.2671 15.0817 29.2671 15.3578V19.079C29.2671 19.3551 29.0432 19.579 28.7671 19.579H23.8685C23.5924 19.579 23.3685 19.3551 23.3685 19.079V4.5C23.3685 4.22386 23.5924 4 23.8685 4H33.914ZM32.8304 10.9175C33.8079 10.9175 34.3605 10.7402 34.6671 10.4935C34.957 10.2602 35.0797 9.92042 35.0797 9.43917C35.0797 9.16287 35.0237 8.95713 34.9342 8.80069C34.8454 8.64532 34.7132 8.52021 34.5309 8.42032C34.1532 8.2134 33.5802 8.12503 32.8304 8.12503H29.7671C29.491 8.12503 29.2671 8.34889 29.2671 8.62503V10.4175C29.2671 10.6937 29.491 10.9175 29.7671 10.9175H32.8304ZM55.0708 4.13937C55.1639 4.04994 55.288 4 55.4171 4H61.6326C62.0938 4 62.3091 4.57119 61.9627 4.8756L55.9164 10.1885C55.7103 10.3697 55.6886 10.6831 55.868 10.8909L62.6548 18.7522C62.9345 19.0762 62.7043 19.579 62.2763 19.579H56.1211C55.9729 19.579 55.8323 19.5132 55.7373 19.3995L51.6631 14.5209C51.4793 14.3007 51.1483 14.2801 50.9385 14.4756L49.3549 15.9515C49.2534 16.0461 49.1958 16.1785 49.1958 16.3173V19.079C49.1958 19.3551 48.9719 19.579 48.6958 19.579H43.7972C43.5211 19.579 43.2972 19.3551 43.2972 19.079V4.5C43.2972 4.22386 43.5211 4 43.7972 4H48.6958C48.9719 4 49.1958 4.22386 49.1958 4.5V8.60801C49.1958 9.0486 49.7243 9.27382 50.0421 8.96863L55.0708 4.13937Z" fill="#EB5E41"></path></g><defs><clippath id="clip0_901_179"><rect width="62.7773" height="24" fill="white"></rect></clippath></defs></svg> </a> </div> <button id="themeToggle" class="px_0 button button--variant_ghost button--size_sm" aria-label="Toggle Color Scheme" data-astro-cid-xszqk3cr=""> <svg width="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-astro-cid-xszqk3cr=""> <path class="sun" fill-rule="evenodd" d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z" data-astro-cid-xszqk3cr=""></path> <path class="moon" fill-rule="evenodd" d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z" data-astro-cid-xszqk3cr=""></path> </svg> </button> <script data-astro-exec="">
const registerColorModeToggle = () => {
document.getElementById('themeToggle').addEventListener('click', () => {
const classList = document.documentElement.classList
classList.toggle('dark')
const isDark = classList.contains('dark')
localStorage.setItem('ark-ui-color-mode', isDark ? 'dark' : 'light')
})
}
// Runs on initial navigation
registerColorModeToggle()
// Runs on view transitions navigation
document.addEventListener('astro:after-swap', registerColorModeToggle)
</script> </div> </div> </div> <div class="border-bw_1px d_block md:d_none"> <div class="pos_relative w_100% mx_auto px_4 md:px_6 py_1"> <div class="d_flex items_center gap_2 flex_row"> <astro-island uid="1GMdQn" prefix="r104" component-url="/_astro/mobile-sidebar-container.BNAuvhaf.js" component-export="MobileSidebarContainer" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"MobileSidebarContainer","value":true}" await-children=""><button aria-label="Open Menu" data-scope="dialog" data-part="trigger" id="dialog::r104R0::trigger" aria-haspopup="dialog" type="button" aria-expanded="false" data-state="closed" aria-controls="dialog::r104R0::content" class="iconButton iconButton--variant_ghost iconButton--size_sm drawer__trigger drawer__trigger--variant_left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu "><line x1="4" x2="20" y1="12" y2="12"></line><line x1="4" x2="20" y1="6" y2="6"></line><line x1="4" x2="20" y1="18" y2="18"></line></svg></button><!--astro:end--></astro-island> <div class="d_flex items_center gap_1 flex_row"> <span class="text textStyle_sm text_fg.subtle font_medium text_capitalize last:text_fg.emphasized">Components</span> <div class="text_fg.subtle"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right "><path d="m9 18 6-6-6-6"></path></svg> </div> <span class="text textStyle_sm text_fg.subtle font_medium text_capitalize last:text_fg.emphasized">Popover</span> </div> </div> </div> </div> </nav> </header> <nav class="bg_bg.default border-e_1px bottom_0 d_none md:d_flex flex_column left_0 overflow_auto pos_fixed px_4 md:px_6 py_8 top_16 w_64 z_1" id="sidebar"> <div class="d_flex flex_column gap_8"> <div class="d_flex flex_column gap_4"><a href="https://ark-ui.com/" target="_blank" aria-current="page" class="link font_medium textStyle_sm w_fit-content text_fg.muted currentPage:text_accent.default currentPage:hover:text_accent.default text-decor_none hover:text_fg.muted"> <div class="d_flex items_center justify_center bg_bg.subtle border-w_1px rounded_l2 w_6 h_6"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open "><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg></div> Documentation</a><a href="https://discord.gg/ww6HE5xaZ2" target="_blank" aria-current="false" class="link font_medium textStyle_sm w_fit-content text_fg.muted currentPage:text_accent.default currentPage:hover:text_accent.default text-decor_none hover:text_fg.muted"> <div class="d_flex items_center justify_center bg_bg.subtle border-w_1px rounded_l2 w_6 h_6"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle "><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></div> Discord</a><a href="https://github.com/chakra-ui/ark/" target="_blank" aria-current="false" class="link font_medium textStyle_sm w_fit-content text_fg.muted currentPage:text_accent.default currentPage:hover:text_accent.default text-decor_none hover:text_fg.muted"> <div class="d_flex items_center justify_center bg_bg.subtle border-w_1px rounded_l2 w_6 h_6"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github "><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></div> GitHub</a><a href="https://ark-ui.canny.io/" target="_blank" aria-current="false" class="link font_medium textStyle_sm w_fit-content text_fg.muted currentPage:text_accent.default currentPage:hover:text_accent.default text-decor_none hover:text_fg.muted"> <div class="d_flex items_center justify_center bg_bg.subtle border-w_1px rounded_l2 w_6 h_6"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map "><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"></polygon><line x1="9" x2="9" y1="3" y2="18"></line><line x1="15" x2="15" y1="6" y2="21"></line></svg></div> Roadmap</a></div> <div class="d_flex flex_column gap_3"> <p class="text textStyle_md md:textStyle_sm font_semibold text_capitalize">Overview</p> <astro-island uid="Z68rNS" prefix="r17" component-url="/_astro/sidebar-group.pYL0hH5E.js" component-export="SidebarGroup" renderer-url="/_astro/client.6N_nQQgG.js" props="{"items":[1,[[0,{"title":[0,"Introduction"],"href":[0,"/docs/overview/introduction"]}],[0,{"title":[0,"Getting Started"],"href":[0,"/docs/overview/getting-started"]}],[0,{"title":[0,"The asChild Prop"],"href":[0,"/docs/overview/as-child-prop"]}],[0,{"title":[0,"Animation"],"href":[0,"/docs/overview/animation"]}]]],"data-astro-transition-persist":[0,"astro-pbta5uz2-5"]}" client="load" opts="{"name":"SidebarGroup","value":true}" data-astro-transition-persist="astro-pbta5uz2-5" await-children=""><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r17R0:" aria-labelledby="radio-group::r17R0::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/overview/introduction" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r17R0::radio:/docs/overview/introduction" for="radio-group::r17R0::radio:input:/docs/overview/introduction" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r17R0::radio:control:/docs/overview/introduction" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r17R0:" id="radio-group::r17R0::radio:input:/docs/overview/introduction" type="radio" name=":r17R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/overview/introduction"><span data-scope="segment-group" data-part="item-text" id="radio-group::r17R0::radio:label:/docs/overview/introduction" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Introduction</div></span></label></a><a href="https://ark-ui.com/docs/overview/getting-started" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r17R0::radio:/docs/overview/getting-started" for="radio-group::r17R0::radio:input:/docs/overview/getting-started" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r17R0::radio:control:/docs/overview/getting-started" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r17R0:" id="radio-group::r17R0::radio:input:/docs/overview/getting-started" type="radio" name=":r17R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/overview/getting-started"><span data-scope="segment-group" data-part="item-text" id="radio-group::r17R0::radio:label:/docs/overview/getting-started" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Getting Started</div></span></label></a><a href="https://ark-ui.com/docs/overview/as-child-prop" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r17R0::radio:/docs/overview/as-child-prop" for="radio-group::r17R0::radio:input:/docs/overview/as-child-prop" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r17R0::radio:control:/docs/overview/as-child-prop" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r17R0:" id="radio-group::r17R0::radio:input:/docs/overview/as-child-prop" type="radio" name=":r17R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/overview/as-child-prop"><span data-scope="segment-group" data-part="item-text" id="radio-group::r17R0::radio:label:/docs/overview/as-child-prop" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">The asChild Prop</div></span></label></a><a href="https://ark-ui.com/docs/overview/animation" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r17R0::radio:/docs/overview/animation" for="radio-group::r17R0::radio:input:/docs/overview/animation" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r17R0::radio:control:/docs/overview/animation" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r17R0:" id="radio-group::r17R0::radio:input:/docs/overview/animation" type="radio" name=":r17R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/overview/animation"><span data-scope="segment-group" data-part="item-text" id="radio-group::r17R0::radio:label:/docs/overview/animation" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Animation</div></span></label></a><div id="radio-group::r17R0::indicator" data-scope="segment-group" data-part="indicator" hidden="" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: var(--transition-duration, 150ms); transition-timing-function: var(--transition-timing-function); top: var(--top);" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div><!--astro:end--></astro-island> </div><div class="d_flex flex_column gap_3"> <p class="text textStyle_md md:textStyle_sm font_semibold text_capitalize">Styling</p> <astro-island uid="Z2rpAI2" prefix="r18" component-url="/_astro/sidebar-group.pYL0hH5E.js" component-export="SidebarGroup" renderer-url="/_astro/client.6N_nQQgG.js" props="{"items":[1,[[0,{"title":[0,"Overview"],"href":[0,"/docs/styling/overview"]}],[0,{"title":[0,"Panda"],"href":[0,"/docs/styling/panda"]}],[0,{"title":[0,"Tailwind"],"href":[0,"/docs/styling/tailwind"]}],[0,{"title":[0,"Vanilla"],"href":[0,"/docs/styling/vanilla"]}]]],"data-astro-transition-persist":[0,"astro-pbta5uz2-6"]}" client="load" opts="{"name":"SidebarGroup","value":true}" data-astro-transition-persist="astro-pbta5uz2-6" await-children=""><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r18R0:" aria-labelledby="radio-group::r18R0::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/styling/overview" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r18R0::radio:/docs/styling/overview" for="radio-group::r18R0::radio:input:/docs/styling/overview" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r18R0::radio:control:/docs/styling/overview" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r18R0:" id="radio-group::r18R0::radio:input:/docs/styling/overview" type="radio" name=":r18R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/styling/overview"><span data-scope="segment-group" data-part="item-text" id="radio-group::r18R0::radio:label:/docs/styling/overview" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Overview</div></span></label></a><a href="https://ark-ui.com/docs/styling/panda" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r18R0::radio:/docs/styling/panda" for="radio-group::r18R0::radio:input:/docs/styling/panda" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r18R0::radio:control:/docs/styling/panda" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r18R0:" id="radio-group::r18R0::radio:input:/docs/styling/panda" type="radio" name=":r18R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/styling/panda"><span data-scope="segment-group" data-part="item-text" id="radio-group::r18R0::radio:label:/docs/styling/panda" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Panda</div></span></label></a><a href="https://ark-ui.com/docs/styling/tailwind" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r18R0::radio:/docs/styling/tailwind" for="radio-group::r18R0::radio:input:/docs/styling/tailwind" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r18R0::radio:control:/docs/styling/tailwind" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r18R0:" id="radio-group::r18R0::radio:input:/docs/styling/tailwind" type="radio" name=":r18R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/styling/tailwind"><span data-scope="segment-group" data-part="item-text" id="radio-group::r18R0::radio:label:/docs/styling/tailwind" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tailwind</div></span></label></a><a href="https://ark-ui.com/docs/styling/vanilla" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r18R0::radio:/docs/styling/vanilla" for="radio-group::r18R0::radio:input:/docs/styling/vanilla" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r18R0::radio:control:/docs/styling/vanilla" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r18R0:" id="radio-group::r18R0::radio:input:/docs/styling/vanilla" type="radio" name=":r18R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/styling/vanilla"><span data-scope="segment-group" data-part="item-text" id="radio-group::r18R0::radio:label:/docs/styling/vanilla" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Vanilla</div></span></label></a><div id="radio-group::r18R0::indicator" data-scope="segment-group" data-part="indicator" hidden="" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: var(--transition-duration, 150ms); transition-timing-function: var(--transition-timing-function); top: var(--top);" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div><!--astro:end--></astro-island> </div><div class="d_flex flex_column gap_3"> <p class="text textStyle_md md:textStyle_sm font_semibold text_capitalize">Components</p> <astro-island uid="1lMLVD" prefix="r19" component-url="/_astro/sidebar-group.pYL0hH5E.js" component-export="SidebarGroup" renderer-url="/_astro/client.6N_nQQgG.js" props="{"items":[1,[[0,{"title":[0,"Accordion"],"href":[0,"/docs/components/accordion"],"label":[0]}],[0,{"title":[0,"Avatar"],"href":[0,"/docs/components/avatar"],"label":[0]}],[0,{"title":[0,"Carousel"],"href":[0,"/docs/components/carousel"],"label":[0]}],[0,{"title":[0,"Checkbox"],"href":[0,"/docs/components/checkbox"],"label":[0]}],[0,{"title":[0,"Progress - Circular"],"href":[0,"/docs/components/circular-progress"],"label":[0,"preview"]}],[0,{"title":[0,"Color Picker"],"href":[0,"/docs/components/color-picker"],"label":[0,"preview"]}],[0,{"title":[0,"Combobox"],"href":[0,"/docs/components/combobox"],"label":[0]}],[0,{"title":[0,"Context Menu"],"href":[0,"/docs/components/context-menu"],"label":[0]}],[0,{"title":[0,"Date Picker"],"href":[0,"/docs/components/date-picker"],"label":[0]}],[0,{"title":[0,"Date Range Picker"],"href":[0,"/docs/components/date-range-picker"],"label":[0]}],[0,{"title":[0,"Dialog"],"href":[0,"/docs/components/dialog"],"label":[0]}],[0,{"title":[0,"Editable"],"href":[0,"/docs/components/editable"],"label":[0]}],[0,{"title":[0,"Environment"],"href":[0,"/docs/components/environment"],"label":[0]}],[0,{"title":[0,"File Upload"],"href":[0,"/docs/components/file-upload"],"label":[0,"preview"]}],[0,{"title":[0,"Hover Card"],"href":[0,"/docs/components/hover-card"],"label":[0]}],[0,{"title":[0,"Progress - Linear"],"href":[0,"/docs/components/linear-progress"],"label":[0,"preview"]}],[0,{"title":[0,"Menu"],"href":[0,"/docs/components/menu"],"label":[0]}],[0,{"title":[0,"Nested Menu"],"href":[0,"/docs/components/nested-menu"],"label":[0]}],[0,{"title":[0,"Number Input"],"href":[0,"/docs/components/number-input"],"label":[0]}],[0,{"title":[0,"Pagination"],"href":[0,"/docs/components/pagination"],"label":[0]}],[0,{"title":[0,"Pin Input"],"href":[0,"/docs/components/pin-input"],"label":[0]}],[0,{"title":[0,"Popover"],"href":[0,"/docs/components/popover"],"label":[0]}],[0,{"title":[0,"Presence"],"href":[0,"/docs/components/presence"],"label":[0]}],[0,{"title":[0,"Radio Group"],"href":[0,"/docs/components/radio-group"],"label":[0]}],[0,{"title":[0,"Range Slider"],"href":[0,"/docs/components/range-slider"],"label":[0]}],[0,{"title":[0,"Rating Group"],"href":[0,"/docs/components/rating-group"],"label":[0]}],[0,{"title":[0,"Segment Group"],"href":[0,"/docs/components/segment-group"],"label":[0]}],[0,{"title":[0,"Select"],"href":[0,"/docs/components/select"],"label":[0]}],[0,{"title":[0,"Slider"],"href":[0,"/docs/components/slider"],"label":[0]}],[0,{"title":[0,"Splitter"],"href":[0,"/docs/components/splitter"],"label":[0,"preview"]}],[0,{"title":[0,"Switch"],"href":[0,"/docs/components/switch"],"label":[0]}],[0,{"title":[0,"Tabs"],"href":[0,"/docs/components/tabs"],"label":[0]}],[0,{"title":[0,"Tags Input"],"href":[0,"/docs/components/tags-input"],"label":[0]}],[0,{"title":[0,"Toast"],"href":[0,"/docs/components/toast"],"label":[0]}],[0,{"title":[0,"Toggle Group"],"href":[0,"/docs/components/toggle-group"],"label":[0]}],[0,{"title":[0,"Tooltip"],"href":[0,"/docs/components/tooltip"],"label":[0]}],[0,{"title":[0,"Tree View"],"href":[0,"/docs/components/tree-view"],"label":[0,"upcoming"]}]]],"data-astro-transition-persist":[0,"astro-pbta5uz2-7"]}" client="load" opts="{"name":"SidebarGroup","value":true}" data-astro-transition-persist="astro-pbta5uz2-7" await-children=""><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r19R0:" aria-labelledby="radio-group::r19R0::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/components/accordion" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/accordion" for="radio-group::r19R0::radio:input:/docs/components/accordion" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/accordion" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/accordion" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/accordion"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/accordion" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Accordion</div></span></label></a><a href="https://ark-ui.com/docs/components/avatar" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/avatar" for="radio-group::r19R0::radio:input:/docs/components/avatar" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/avatar" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/avatar" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/avatar"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/avatar" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Avatar</div></span></label></a><a href="https://ark-ui.com/docs/components/carousel" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/carousel" for="radio-group::r19R0::radio:input:/docs/components/carousel" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/carousel" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/carousel" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/carousel"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/carousel" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Carousel</div></span></label></a><a href="https://ark-ui.com/docs/components/checkbox" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/checkbox" for="radio-group::r19R0::radio:input:/docs/components/checkbox" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/checkbox" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/checkbox" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/checkbox"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/checkbox" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Checkbox</div></span></label></a><a href="https://ark-ui.com/docs/components/circular-progress" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/circular-progress" for="radio-group::r19R0::radio:input:/docs/components/circular-progress" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/circular-progress" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/circular-progress" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/circular-progress"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/circular-progress" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Progress - Circular<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/color-picker" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/color-picker" for="radio-group::r19R0::radio:input:/docs/components/color-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/color-picker" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/color-picker" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/color-picker"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/color-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Color Picker<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/combobox" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/combobox" for="radio-group::r19R0::radio:input:/docs/components/combobox" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/combobox" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/combobox" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/combobox"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/combobox" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Combobox</div></span></label></a><a href="https://ark-ui.com/docs/components/context-menu" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/context-menu" for="radio-group::r19R0::radio:input:/docs/components/context-menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/context-menu" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/context-menu" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/context-menu"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/context-menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Context Menu</div></span></label></a><a href="https://ark-ui.com/docs/components/date-picker" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/date-picker" for="radio-group::r19R0::radio:input:/docs/components/date-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/date-picker" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/date-picker" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/date-picker"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/date-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Date Picker</div></span></label></a><a href="https://ark-ui.com/docs/components/date-range-picker" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/date-range-picker" for="radio-group::r19R0::radio:input:/docs/components/date-range-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/date-range-picker" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/date-range-picker" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/date-range-picker"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/date-range-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Date Range Picker</div></span></label></a><a href="https://ark-ui.com/docs/components/dialog" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/dialog" for="radio-group::r19R0::radio:input:/docs/components/dialog" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/dialog" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/dialog" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/dialog"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/dialog" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Dialog</div></span></label></a><a href="https://ark-ui.com/docs/components/editable" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/editable" for="radio-group::r19R0::radio:input:/docs/components/editable" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/editable" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/editable" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/editable"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/editable" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Editable</div></span></label></a><a href="https://ark-ui.com/docs/components/environment" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/environment" for="radio-group::r19R0::radio:input:/docs/components/environment" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/environment" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/environment" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/environment"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/environment" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Environment</div></span></label></a><a href="https://ark-ui.com/docs/components/file-upload" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/file-upload" for="radio-group::r19R0::radio:input:/docs/components/file-upload" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/file-upload" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/file-upload" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/file-upload"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/file-upload" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">File Upload<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/hover-card" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/hover-card" for="radio-group::r19R0::radio:input:/docs/components/hover-card" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/hover-card" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/hover-card" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/hover-card"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/hover-card" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Hover Card</div></span></label></a><a href="https://ark-ui.com/docs/components/linear-progress" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/linear-progress" for="radio-group::r19R0::radio:input:/docs/components/linear-progress" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/linear-progress" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/linear-progress" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/linear-progress"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/linear-progress" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Progress - Linear<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/menu" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/menu" for="radio-group::r19R0::radio:input:/docs/components/menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/menu" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/menu" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/menu"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Menu</div></span></label></a><a href="https://ark-ui.com/docs/components/nested-menu" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/nested-menu" for="radio-group::r19R0::radio:input:/docs/components/nested-menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/nested-menu" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/nested-menu" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/nested-menu"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/nested-menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Nested Menu</div></span></label></a><a href="https://ark-ui.com/docs/components/number-input" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/number-input" for="radio-group::r19R0::radio:input:/docs/components/number-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/number-input" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/number-input" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/number-input"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/number-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Number Input</div></span></label></a><a href="https://ark-ui.com/docs/components/pagination" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/pagination" for="radio-group::r19R0::radio:input:/docs/components/pagination" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/pagination" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/pagination" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/pagination"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/pagination" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Pagination</div></span></label></a><a href="https://ark-ui.com/docs/components/pin-input" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/pin-input" for="radio-group::r19R0::radio:input:/docs/components/pin-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/pin-input" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/pin-input" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/pin-input"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/pin-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Pin Input</div></span></label></a><a href="https://ark-ui.com/docs/components/popover" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/popover" for="radio-group::r19R0::radio:input:/docs/components/popover" data-state="checked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/popover" aria-hidden="true" data-state="checked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/popover" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/popover" checked=""><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/popover" data-state="checked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Popover</div></span></label></a><a href="https://ark-ui.com/docs/components/presence" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/presence" for="radio-group::r19R0::radio:input:/docs/components/presence" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/presence" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/presence" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/presence"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/presence" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Presence</div></span></label></a><a href="https://ark-ui.com/docs/components/radio-group" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/radio-group" for="radio-group::r19R0::radio:input:/docs/components/radio-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/radio-group" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/radio-group" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/radio-group"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/radio-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Radio Group</div></span></label></a><a href="https://ark-ui.com/docs/components/range-slider" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/range-slider" for="radio-group::r19R0::radio:input:/docs/components/range-slider" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/range-slider" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/range-slider" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/range-slider"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/range-slider" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Range Slider</div></span></label></a><a href="https://ark-ui.com/docs/components/rating-group" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/rating-group" for="radio-group::r19R0::radio:input:/docs/components/rating-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/rating-group" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/rating-group" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/rating-group"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/rating-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Rating Group</div></span></label></a><a href="https://ark-ui.com/docs/components/segment-group" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/segment-group" for="radio-group::r19R0::radio:input:/docs/components/segment-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/segment-group" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/segment-group" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/segment-group"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/segment-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Segment Group</div></span></label></a><a href="https://ark-ui.com/docs/components/select" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/select" for="radio-group::r19R0::radio:input:/docs/components/select" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/select" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/select" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/select"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/select" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Select</div></span></label></a><a href="https://ark-ui.com/docs/components/slider" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/slider" for="radio-group::r19R0::radio:input:/docs/components/slider" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/slider" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/slider" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/slider"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/slider" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Slider</div></span></label></a><a href="https://ark-ui.com/docs/components/splitter" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/splitter" for="radio-group::r19R0::radio:input:/docs/components/splitter" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/splitter" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/splitter" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/splitter"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/splitter" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Splitter<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/switch" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/switch" for="radio-group::r19R0::radio:input:/docs/components/switch" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/switch" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/switch" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/switch"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/switch" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Switch</div></span></label></a><a href="https://ark-ui.com/docs/components/tabs" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/tabs" for="radio-group::r19R0::radio:input:/docs/components/tabs" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/tabs" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/tabs" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/tabs"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/tabs" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tabs</div></span></label></a><a href="https://ark-ui.com/docs/components/tags-input" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/tags-input" for="radio-group::r19R0::radio:input:/docs/components/tags-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/tags-input" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/tags-input" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/tags-input"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/tags-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tags Input</div></span></label></a><a href="https://ark-ui.com/docs/components/toast" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/toast" for="radio-group::r19R0::radio:input:/docs/components/toast" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/toast" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/toast" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/toast"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/toast" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Toast</div></span></label></a><a href="https://ark-ui.com/docs/components/toggle-group" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/toggle-group" for="radio-group::r19R0::radio:input:/docs/components/toggle-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/toggle-group" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/toggle-group" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/toggle-group"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/toggle-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Toggle Group</div></span></label></a><a href="https://ark-ui.com/docs/components/tooltip" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/tooltip" for="radio-group::r19R0::radio:input:/docs/components/tooltip" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/tooltip" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/tooltip" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/tooltip"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/tooltip" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tooltip</div></span></label></a><a href="https://ark-ui.com/docs/components/tree-view" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r19R0::radio:/docs/components/tree-view" for="radio-group::r19R0::radio:input:/docs/components/tree-view" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r19R0::radio:control:/docs/components/tree-view" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r19R0:" id="radio-group::r19R0::radio:input:/docs/components/tree-view" type="radio" name=":r19R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/tree-view"><span data-scope="segment-group" data-part="item-text" id="radio-group::r19R0::radio:label:/docs/components/tree-view" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tree View<div class="badge badge--variant_subtle badge--size_sm">upcoming</div></div></span></label></a><div id="radio-group::r19R0::indicator" data-scope="segment-group" data-part="indicator" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); top: var(--top); --left: 0px; --top: 796px; --width: 79px; --height: 32px;" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div><!--astro:end--></astro-island> </div><div class="d_flex flex_column gap_3"> <p class="text textStyle_md md:textStyle_sm font_semibold text_capitalize">Changelog</p> <astro-island uid="Y2l4T" prefix="r20" component-url="/_astro/sidebar-group.pYL0hH5E.js" component-export="SidebarGroup" renderer-url="/_astro/client.6N_nQQgG.js" props="{"items":[1,[[0,{"title":[0,"react"],"href":[0,"/docs/changelog/react"]}],[0,{"title":[0,"solid"],"href":[0,"/docs/changelog/solid"]}],[0,{"title":[0,"vue"],"href":[0,"/docs/changelog/vue"]}]]],"data-astro-transition-persist":[0,"astro-pbta5uz2-8"]}" client="load" opts="{"name":"SidebarGroup","value":true}" data-astro-transition-persist="astro-pbta5uz2-8" await-children=""><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r20R0:" aria-labelledby="radio-group::r20R0::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/changelog/react" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r20R0::radio:/docs/changelog/react" for="radio-group::r20R0::radio:input:/docs/changelog/react" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r20R0::radio:control:/docs/changelog/react" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r20R0:" id="radio-group::r20R0::radio:input:/docs/changelog/react" type="radio" name=":r20R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/changelog/react"><span data-scope="segment-group" data-part="item-text" id="radio-group::r20R0::radio:label:/docs/changelog/react" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">react</div></span></label></a><a href="https://ark-ui.com/docs/changelog/solid" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r20R0::radio:/docs/changelog/solid" for="radio-group::r20R0::radio:input:/docs/changelog/solid" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r20R0::radio:control:/docs/changelog/solid" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r20R0:" id="radio-group::r20R0::radio:input:/docs/changelog/solid" type="radio" name=":r20R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/changelog/solid"><span data-scope="segment-group" data-part="item-text" id="radio-group::r20R0::radio:label:/docs/changelog/solid" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">solid</div></span></label></a><a href="https://ark-ui.com/docs/changelog/vue" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r20R0::radio:/docs/changelog/vue" for="radio-group::r20R0::radio:input:/docs/changelog/vue" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r20R0::radio:control:/docs/changelog/vue" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r20R0:" id="radio-group::r20R0::radio:input:/docs/changelog/vue" type="radio" name=":r20R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/changelog/vue"><span data-scope="segment-group" data-part="item-text" id="radio-group::r20R0::radio:label:/docs/changelog/vue" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">vue</div></span></label></a><div id="radio-group::r20R0::indicator" data-scope="segment-group" data-part="indicator" hidden="" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: var(--transition-duration, 150ms); transition-timing-function: var(--transition-timing-function); top: var(--top);" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div><!--astro:end--></astro-island> </div></div> </nav> <main class="d_flex flex_column pt_110px md:pt_16 ps_0 md:ps_64 bg_bg.default"> <div class="border-bw_1px bg_gray.2 dark:bg_black.a2"> <div class="pos_relative w_100% mx_auto px_4 md:px_6 max-w_66rem py_16 md:py_24"> <article class="prose prose--size_base [&>_:first-child]:mt_0"> <h1 class="text font_bold">Popover</h1> <p class="text text_fg.emphasized lead">An overlay that displays additional information or options when triggered.</p> </article> </div> </div> <div class="d_flex justify_space-between py_12 pos_relative"> <div class="pos_relative w_100% mx_auto px_4 md:px_6 max-w_51rem min-w_0"> <div class="d_flex flex_column gap_12"> <article class="prose prose--size_base max-w_full [&>_:first-child]:mt_0"><div class="d_flex bg_bg.canvas min-h_40 rounded_lg border-w_1px w_full overflow_hidden not-prose"> <div class="d_flex items_center justify_center flex_1 p_4 md:p_6"><astro-island uid="ZLhoim" prefix="r66" component-url="/_astro/demos.K9EFLFX2.js" component-export="Popover" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"Popover","value":true}" await-children=""><button data-scope="popover" data-part="trigger" type="button" id="popover::r66R0::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r66R0::content" class="button button--variant_outline button--size_md popover__trigger">Open Popover</button><!--astro:end--></astro-island></div> </div>
<h2 id="anatomy">Anatomy</h2>
<p>To set up the popover correctly, you’ll need to understand its anatomy and how
we name its parts.</p>
<blockquote>
<p>Each part includes a <code class="code code--size_md code--variant_outline">data-part</code> attribute to help identify them in the DOM.</p>
</blockquote>
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script data-astro-exec="">(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var b=Object.defineProperty;var f=(c,o,i)=>o in c?b(c,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):c[o]=i;var l=(c,o,i)=>(f(c,typeof o!="symbol"?o+"":o,i),i);var p;{let c={0:t=>m(t),1:t=>i(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(i(t)),5:t=>new Set(i(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},o=t=>{let[e,r]=t;return e in c?c[e](r):void 0},i=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,r])=>[e,o(r)]));customElements.get("astro-island")||customElements.define("astro-island",(p=class extends HTMLElement{constructor(){super(...arguments);l(this,"Component");l(this,"hydrator");l(this,"hydrate",async()=>{var d;if(!this.hydrator||!this.isConnected)return;let e=(d=this.parentElement)==null?void 0:d.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let r=this.querySelectorAll("astro-slot"),a={},h=this.querySelectorAll("template[data-astro-template]");for(let n of h){let s=n.closest(this.tagName);s!=null&&s.isSameNode(this)&&(a[n.getAttribute("data-astro-template")||"default"]=n.innerHTML,n.remove())}for(let n of r){let s=n.closest(this.tagName);s!=null&&s.isSameNode(this)&&(a[n.getAttribute("name")||"default"]=n.innerHTML)}let u;try{u=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(n){let s=this.getAttribute("component-url")||"<unknown>",y=this.getAttribute("component-export");throw y&&(s+=` (export ${y})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),n),n}await this.hydrator(this)(this.Component,u,a,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});l(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),r.disconnect(),this.childrenConnectedCallback()},r=new MutationObserver(()=>{var a;((a=this.lastChild)==null?void 0:a.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});r.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}start(){let e=JSON.parse(this.getAttribute("opts")),r=this.getAttribute("client");if(Astro[r]===void 0){window.addEventListener(`astro:${r}`,()=>this.start(),{once:!0});return}Astro[r](async()=>{let a=this.getAttribute("renderer-url"),[h,{default:u}]=await Promise.all([import(this.getAttribute("component-url")),a?import(a):()=>()=>{}]),d=this.getAttribute("component-export")||"default";if(!d.includes("."))this.Component=h[d];else{this.Component=h;for(let n of d.split("."))this.Component=this.Component[n]}return this.hydrator=u,this.hydrate},e,this)}attributeChangedCallback(){this.hydrate()}},l(p,"observedAttributes",["props"]),p))}})();</script><astro-island uid="Z2eqgLn" prefix="r64" component-url="/_astro/anatomy-image.UdqeHQVp.js" component-export="AnatomyImage" renderer-url="/_astro/client.6N_nQQgG.js" props="{"id":[0,"popover"]}" ssr="" client="load" opts="{"name":"AnatomyImage","value":true}" await-children=""><div style="background:linear-gradient(112deg, #974435 0%, #702b1f 100%)" class="my_8"><svg width="1456" height="812" viewBox="0 0 1456 812" fill="none" xmlns="http://www.w3.org/2000/svg" class="max-w_100% h_auto"><rect x="206" y="261" width="1044" height="287" fill="#2d1510"></rect><path d="M294.625 358.41C292.038 358.41 289.783 357.838 287.859 356.693C285.948 355.549 284.459 353.885 283.393 351.701C282.34 349.504 281.814 346.846 281.814 343.726C281.814 340.723 282.327 338.129 283.354 335.945C284.394 333.761 285.876 332.078 287.8 330.895C289.737 329.712 292.045 329.12 294.723 329.12C296.66 329.12 298.434 329.491 300.046 330.232C301.658 330.973 302.952 332.078 303.927 333.547C304.915 335.016 305.422 336.836 305.448 339.007H299.871C299.832 337.85 299.559 336.92 299.052 336.218C298.545 335.516 297.882 335.009 297.063 334.697C296.244 334.385 295.347 334.229 294.372 334.229C293.033 334.229 291.837 334.58 290.784 335.282C289.744 335.984 288.918 337.044 288.307 338.461C287.696 339.878 287.391 341.659 287.391 343.804C287.391 346.079 287.703 347.918 288.327 349.322C288.951 350.713 289.796 351.727 290.862 352.364C291.928 352.988 293.124 353.3 294.45 353.3C295.698 353.3 296.718 353.118 297.511 352.754C298.304 352.377 298.896 351.864 299.286 351.214C299.676 350.564 299.884 349.823 299.91 348.991H305.487C305.448 350.928 304.967 352.605 304.044 354.022C303.134 355.426 301.873 356.511 300.261 357.278C298.649 358.033 296.77 358.41 294.625 358.41ZM309.505 358V327.599H314.79V336.725L314.458 342.79L314.653 344.506L314.419 343.121C314.575 341.951 314.887 340.846 315.355 339.806C315.823 338.753 316.519 337.902 317.442 337.252C318.365 336.602 319.587 336.277 321.108 336.277C323.084 336.277 324.637 336.907 325.768 338.168C326.912 339.416 327.484 341.327 327.484 343.901V358H322.083V345.851C322.083 344.057 321.836 342.777 321.342 342.01C320.861 341.243 320.022 340.859 318.826 340.859C317.981 340.859 317.208 341.145 316.506 341.717C315.817 342.276 315.277 342.946 314.887 343.726V358H309.505ZM341.395 358.293C339.38 358.293 337.625 357.87 336.13 357.025C334.635 356.18 333.478 354.938 332.659 353.3C331.84 351.649 331.43 349.628 331.43 347.236C331.43 344.974 331.859 343.024 332.717 341.386C333.588 339.748 334.784 338.493 336.305 337.622C337.826 336.738 339.549 336.296 341.473 336.296C343.553 336.296 345.334 336.738 346.816 337.622C348.311 338.493 349.455 339.748 350.248 341.386C351.041 343.024 351.437 344.974 351.437 347.236C351.437 349.628 350.995 351.649 350.111 353.3C349.227 354.938 348.025 356.18 346.504 357.025C344.996 357.87 343.293 358.293 341.395 358.293ZM341.473 353.788C342.799 353.788 343.891 353.294 344.749 352.306C345.62 351.318 346.055 349.628 346.055 347.236C346.055 345.013 345.62 343.388 344.749 342.361C343.878 341.321 342.76 340.801 341.395 340.801C340.069 340.801 338.977 341.314 338.119 342.341C337.261 343.368 336.832 345 336.832 347.236C336.832 349.524 337.274 351.188 338.158 352.228C339.042 353.268 340.147 353.788 341.473 353.788ZM364.246 358.293C362.231 358.293 360.476 357.87 358.981 357.025C357.486 356.18 356.329 354.938 355.51 353.3C354.691 351.649 354.282 349.628 354.282 347.236C354.282 344.974 354.711 343.024 355.569 341.386C356.44 339.748 357.636 338.493 359.157 337.622C360.678 336.738 362.4 336.296 364.324 336.296C366.404 336.296 368.185 336.738 369.667 337.622C371.162 338.493 372.306 339.748 373.099 341.386C373.892 343.024 374.289 344.974 374.289 347.236C374.289 349.628 373.847 351.649 372.963 353.3C372.079 354.938 370.876 356.18 369.355 357.025C367.847 357.87 366.144 358.293 364.246 358.293ZM364.324 353.788C365.65 353.788 366.742 353.294 367.6 352.306C368.471 351.318 368.907 349.628 368.907 347.236C368.907 345.013 368.471 343.388 367.6 342.361C366.729 341.321 365.611 340.801 364.246 340.801C362.92 340.801 361.828 341.314 360.97 342.341C360.112 343.368 359.683 345 359.683 347.236C359.683 349.524 360.125 351.188 361.009 352.228C361.893 353.268 362.998 353.788 364.324 353.788ZM385.925 358.332C384.196 358.332 382.688 358.078 381.401 357.571C380.114 357.064 379.1 356.297 378.359 355.27C377.631 354.23 377.228 352.904 377.15 351.292H382.376C382.519 352.358 382.903 353.131 383.527 353.612C384.151 354.08 384.957 354.314 385.945 354.314C386.543 354.314 387.095 354.249 387.602 354.119C388.109 353.989 388.512 353.768 388.811 353.456C389.123 353.144 389.279 352.715 389.279 352.169C389.279 351.753 389.182 351.415 388.987 351.155C388.792 350.882 388.499 350.655 388.109 350.473C387.732 350.278 387.264 350.096 386.705 349.927C386.146 349.758 385.503 349.569 384.775 349.361C383.488 348.984 382.305 348.536 381.226 348.016C380.147 347.483 379.282 346.781 378.632 345.91C377.982 345.039 377.657 343.901 377.657 342.497C377.657 340.482 378.398 338.955 379.88 337.915C381.362 336.862 383.293 336.335 385.672 336.335C387.128 336.335 388.441 336.537 389.611 336.94C390.781 337.343 391.743 338.038 392.497 339.026C393.264 340.014 393.751 341.386 393.959 343.141L388.772 343.121C388.616 342.315 388.369 341.711 388.031 341.308C387.706 340.892 387.329 340.612 386.9 340.469C386.484 340.326 386.042 340.255 385.574 340.255C385.054 340.255 384.586 340.339 384.17 340.508C383.767 340.664 383.455 340.898 383.234 341.21C383.013 341.522 382.903 341.899 382.903 342.341C382.903 342.887 383.059 343.342 383.371 343.706C383.696 344.07 384.183 344.389 384.833 344.662C385.496 344.922 386.322 345.201 387.31 345.5C388.038 345.695 388.818 345.923 389.65 346.183C390.482 346.443 391.268 346.794 392.009 347.236C392.75 347.665 393.355 348.25 393.823 348.991C394.304 349.719 394.544 350.668 394.544 351.838C394.544 353.879 393.764 355.471 392.204 356.615C390.644 357.759 388.551 358.332 385.925 358.332ZM407.34 358.293C405.234 358.293 403.427 357.87 401.919 357.025C400.411 356.167 399.254 354.925 398.448 353.3C397.642 351.662 397.239 349.673 397.239 347.333C397.239 344.967 397.662 342.965 398.507 341.327C399.365 339.689 400.554 338.441 402.075 337.583C403.609 336.725 405.39 336.296 407.418 336.296C409.394 336.296 411.065 336.68 412.43 337.447C413.808 338.201 414.854 339.325 415.569 340.82C416.284 342.302 416.642 344.122 416.642 346.28C416.642 346.631 416.629 346.963 416.603 347.275C416.59 347.587 416.57 347.957 416.544 348.386H402.543C402.673 350.336 403.148 351.766 403.967 352.676C404.799 353.586 405.878 354.041 407.204 354.041C408.374 354.041 409.264 353.788 409.875 353.281C410.486 352.774 410.87 352.156 411.026 351.428H416.193C416.076 352.845 415.634 354.074 414.867 355.114C414.113 356.141 413.093 356.927 411.806 357.473C410.532 358.02 409.043 358.293 407.34 358.293ZM404.844 345.091H411.396C411.344 343.635 410.987 342.53 410.324 341.776C409.674 341.022 408.634 340.645 407.204 340.645C405.631 340.645 404.467 341.191 403.713 342.283C402.972 343.362 402.569 344.883 402.504 346.846C402.608 346.17 402.849 345.708 403.226 345.461C403.603 345.214 404.142 345.091 404.844 345.091ZM432.376 358L425.083 336.725H431.011L433.8 347.392L435.165 352.832H435.34L436.705 347.411L439.494 336.725H445.402L438.148 358H432.376ZM457.004 358.293C454.898 358.293 453.091 357.87 451.583 357.025C450.075 356.167 448.918 354.925 448.112 353.3C447.306 351.662 446.903 349.673 446.903 347.333C446.903 344.967 447.326 342.965 448.171 341.327C449.029 339.689 450.218 338.441 451.739 337.583C453.273 336.725 455.054 336.296 457.082 336.296C459.058 336.296 460.729 336.68 462.094 337.447C463.472 338.201 464.518 339.325 465.233 340.82C465.948 342.302 466.306 344.122 466.306 346.28C466.306 346.631 466.293 346.963 466.267 347.275C466.254 347.587 466.234 347.957 466.208 348.386H452.207C452.337 350.336 452.812 351.766 453.631 352.676C454.463 353.586 455.542 354.041 456.868 354.041C458.038 354.041 458.928 353.788 459.539 353.281C460.15 352.774 460.534 352.156 460.69 351.428H465.857C465.74 352.845 465.298 354.074 464.531 355.114C463.777 356.141 462.757 356.927 461.47 357.473C460.196 358.02 458.707 358.293 457.004 358.293ZM454.508 345.091H461.06C461.008 343.635 460.651 342.53 459.988 341.776C459.338 341.022 458.298 340.645 456.868 340.645C455.295 340.645 454.131 341.191 453.377 342.283C452.636 343.362 452.233 344.883 452.168 346.846C452.272 346.17 452.513 345.708 452.89 345.461C453.267 345.214 453.806 345.091 454.508 345.091ZM470.247 358V336.706H474.985L475.492 344.993L475.102 343.784C475.219 342.783 475.414 341.834 475.687 340.937C475.973 340.04 476.357 339.241 476.838 338.539C477.332 337.837 477.936 337.284 478.651 336.881C479.379 336.478 480.231 336.277 481.206 336.277C481.466 336.277 481.726 336.29 481.986 336.316C482.259 336.342 482.499 336.387 482.707 336.452V342.107C482.265 341.977 481.817 341.893 481.362 341.854C480.92 341.802 480.491 341.776 480.075 341.776C479.464 341.776 478.866 341.86 478.281 342.029C477.696 342.185 477.176 342.432 476.721 342.77C476.266 343.095 475.908 343.505 475.648 343.999V358H470.247ZM493.594 358.332C491.865 358.332 490.357 358.078 489.07 357.571C487.783 357.064 486.769 356.297 486.028 355.27C485.3 354.23 484.897 352.904 484.819 351.292H490.045C490.188 352.358 490.572 353.131 491.196 353.612C491.82 354.08 492.626 354.314 493.614 354.314C494.212 354.314 494.764 354.249 495.271 354.119C495.778 353.989 496.181 353.768 496.48 353.456C496.792 353.144 496.948 352.715 496.948 352.169C496.948 351.753 496.851 351.415 496.656 351.155C496.461 350.882 496.168 350.655 495.778 350.473C495.401 350.278 494.933 350.096 494.374 349.927C493.815 349.758 493.172 349.569 492.444 349.361C491.157 348.984 489.974 348.536 488.895 348.016C487.816 347.483 486.951 346.781 486.301 345.91C485.651 345.039 485.326 343.901 485.326 342.497C485.326 340.482 486.067 338.955 487.549 337.915C489.031 336.862 490.962 336.335 493.341 336.335C494.797 336.335 496.11 336.537 497.28 336.94C498.45 337.343 499.412 338.038 500.166 339.026C500.933 340.014 501.42 341.386 501.628 343.141L496.441 343.121C496.285 342.315 496.038 341.711 495.7 341.308C495.375 340.892 494.998 340.612 494.569 340.469C494.153 340.326 493.711 340.255 493.243 340.255C492.723 340.255 492.255 340.339 491.839 340.508C491.436 340.664 491.124 340.898 490.903 341.21C490.682 341.522 490.572 341.899 490.572 342.341C490.572 342.887 490.728 343.342 491.04 343.706C491.365 344.07 491.852 344.389 492.502 344.662C493.165 344.922 493.991 345.201 494.979 345.5C495.707 345.695 496.487 345.923 497.319 346.183C498.151 346.443 498.937 346.794 499.678 347.236C500.419 347.665 501.024 348.25 501.492 348.991C501.973 349.719 502.213 350.668 502.213 351.838C502.213 353.879 501.433 355.471 499.873 356.615C498.313 357.759 496.22 358.332 493.594 358.332ZM506.238 358V336.706H511.62L511.6 358H506.238ZM508.948 333.937C508.012 333.937 507.219 333.612 506.569 332.962C505.919 332.312 505.594 331.48 505.594 330.466C505.594 329.452 505.919 328.626 506.569 327.989C507.232 327.339 508.025 327.014 508.948 327.014C509.871 327.014 510.658 327.339 511.308 327.989C511.971 328.626 512.302 329.452 512.302 330.466C512.302 331.48 511.971 332.312 511.308 332.962C510.658 333.612 509.871 333.937 508.948 333.937ZM525.693 358.293C523.678 358.293 521.923 357.87 520.428 357.025C518.933 356.18 517.776 354.938 516.957 353.3C516.138 351.649 515.728 349.628 515.728 347.236C515.728 344.974 516.157 343.024 517.015 341.386C517.886 339.748 519.082 338.493 520.603 337.622C522.124 336.738 523.847 336.296 525.771 336.296C527.851 336.296 529.632 336.738 531.114 337.622C532.609 338.493 533.753 339.748 534.546 341.386C535.339 343.024 535.735 344.974 535.735 347.236C535.735 349.628 535.293 351.649 534.409 353.3C533.525 354.938 532.323 356.18 530.802 357.025C529.294 357.87 527.591 358.293 525.693 358.293ZM525.771 353.788C527.097 353.788 528.189 353.294 529.047 352.306C529.918 351.318 530.353 349.628 530.353 347.236C530.353 345.013 529.918 343.388 529.047 342.361C528.176 341.321 527.058 340.801 525.693 340.801C524.367 340.801 523.275 341.314 522.417 342.341C521.559 343.368 521.13 345 521.13 347.236C521.13 349.524 521.572 351.188 522.456 352.228C523.34 353.268 524.445 353.788 525.771 353.788ZM539.868 358V336.706H544.606L545.113 344.74L544.84 343.121C544.996 341.951 545.302 340.846 545.757 339.806C546.212 338.753 546.894 337.902 547.804 337.252C548.727 336.602 549.943 336.277 551.451 336.277C553.427 336.277 554.987 336.907 556.131 338.168C557.275 339.416 557.847 341.327 557.847 343.901V358H552.465V345.851C552.465 344.564 552.341 343.563 552.094 342.848C551.86 342.12 551.503 341.607 551.022 341.308C550.554 341.009 549.956 340.859 549.228 340.859C548.344 340.859 547.544 341.132 546.829 341.678C546.127 342.224 545.607 342.855 545.269 343.57V358H539.868ZM567.448 349.42C567.344 349.212 567.253 348.926 567.175 348.562C567.097 348.198 567.058 347.743 567.058 347.197C567.058 346.04 567.292 345.097 567.76 344.369C568.241 343.628 568.826 343.004 569.515 342.497C570.204 341.99 570.893 341.503 571.582 341.035C572.284 340.554 572.869 340.014 573.337 339.416C573.805 338.805 574.039 338.025 574.039 337.076C574.039 336.088 573.727 335.328 573.103 334.795C572.492 334.249 571.562 333.976 570.314 333.976C568.819 333.976 567.766 334.385 567.155 335.204C566.544 336.023 566.278 337.252 566.356 338.89L561.481 338.87C561.286 337.141 561.442 335.536 561.949 334.054C562.469 332.572 563.405 331.376 564.757 330.466C566.109 329.556 567.935 329.101 570.236 329.101C572.394 329.101 574.123 329.484 575.423 330.251C576.736 331.018 577.679 332.006 578.251 333.215C578.836 334.424 579.128 335.685 579.128 336.998C579.128 338.363 578.881 339.488 578.387 340.372C577.893 341.243 577.276 341.971 576.535 342.556C575.794 343.128 575.053 343.654 574.312 344.135C573.571 344.616 572.947 345.149 572.44 345.734C571.946 346.306 571.699 347.028 571.699 347.899C571.699 348.107 571.705 348.36 571.718 348.659C571.744 348.945 571.79 349.199 571.855 349.42H567.448ZM569.944 358.293C569.073 358.293 568.325 357.987 567.701 357.376C567.09 356.765 566.785 355.972 566.785 354.997C566.785 354.035 567.09 353.248 567.701 352.637C568.325 352.013 569.073 351.701 569.944 351.701C570.841 351.701 571.588 352.013 572.186 352.637C572.797 353.248 573.103 354.028 573.103 354.977C573.103 355.965 572.791 356.765 572.167 357.376C571.556 357.987 570.815 358.293 569.944 358.293Z" fill="#ffffff"></path><path d="M291.388 446.39C289.399 446.39 287.657 446.065 286.162 445.415C284.68 444.765 283.523 443.79 282.691 442.49C281.859 441.19 281.424 439.565 281.385 437.615H284.953C284.992 438.863 285.291 439.89 285.85 440.696C286.409 441.502 287.176 442.106 288.151 442.509C289.139 442.899 290.283 443.094 291.583 443.094C293 443.094 294.138 442.912 294.996 442.548C295.867 442.184 296.504 441.69 296.907 441.066C297.31 440.429 297.511 439.721 297.511 438.941C297.511 437.979 297.238 437.186 296.692 436.562C296.159 435.925 295.373 435.366 294.333 434.885C293.306 434.391 292.058 433.89 290.589 433.383C289.029 432.837 287.644 432.187 286.435 431.433C285.239 430.666 284.297 429.743 283.608 428.664C282.919 427.572 282.574 426.285 282.574 424.803C282.574 422.333 283.374 420.448 284.973 419.148C286.585 417.848 288.762 417.198 291.505 417.198C293.338 417.198 294.853 417.491 296.049 418.076C297.258 418.661 298.194 419.532 298.857 420.689C299.52 421.833 299.955 423.256 300.163 424.96H296.575C296.458 424.062 296.211 423.282 295.834 422.619C295.457 421.943 294.905 421.423 294.177 421.059C293.462 420.682 292.506 420.494 291.31 420.494C289.685 420.494 288.418 420.838 287.508 421.527C286.611 422.216 286.162 423.25 286.162 424.628C286.162 425.447 286.325 426.162 286.65 426.773C286.988 427.384 287.586 427.962 288.444 428.508C289.302 429.054 290.537 429.639 292.149 430.263C293.319 430.718 294.443 431.173 295.522 431.628C296.601 432.083 297.563 432.61 298.408 433.208C299.253 433.793 299.923 434.527 300.417 435.411C300.911 436.282 301.158 437.374 301.158 438.687C301.184 441.157 300.365 443.062 298.701 444.401C297.037 445.727 294.599 446.39 291.388 446.39ZM313.814 446.293C311.942 446.293 310.298 445.87 308.881 445.025C307.477 444.18 306.378 442.938 305.585 441.3C304.805 439.649 304.415 437.628 304.415 435.236C304.415 432.974 304.831 431.024 305.663 429.386C306.495 427.748 307.626 426.493 309.056 425.622C310.499 424.738 312.111 424.296 313.892 424.296C315.829 424.296 317.5 424.738 318.904 425.622C320.321 426.493 321.413 427.748 322.18 429.386C322.947 431.024 323.33 432.974 323.33 435.236C323.33 437.628 322.901 439.649 322.043 441.3C321.198 442.938 320.054 444.18 318.611 445.025C317.168 445.87 315.569 446.293 313.814 446.293ZM313.892 443.094C315.634 443.094 317.025 442.444 318.065 441.144C319.105 439.844 319.625 437.875 319.625 435.236C319.625 432.714 319.112 430.796 318.085 429.483C317.071 428.157 315.647 427.494 313.814 427.494C312.085 427.494 310.701 428.157 309.661 429.483C308.634 430.796 308.12 432.714 308.12 435.236C308.12 437.784 308.64 439.734 309.68 441.086C310.733 442.425 312.137 443.094 313.892 443.094ZM328.254 446V424.706H331.335L331.744 432.74L331.393 431.121C331.562 429.86 331.913 428.716 332.446 427.689C332.979 426.649 333.733 425.824 334.708 425.213C335.683 424.589 336.912 424.277 338.394 424.277C340.123 424.277 341.494 424.764 342.508 425.739C343.535 426.701 344.166 428.183 344.4 430.185L344.497 430.478V446H340.87V432.74C340.87 431.531 340.74 430.556 340.48 429.815C340.233 429.074 339.83 428.534 339.271 428.196C338.712 427.845 337.978 427.67 337.068 427.67C335.924 427.67 334.916 427.988 334.045 428.625C333.174 429.262 332.459 430.14 331.9 431.258V446H328.254ZM353.487 446V432.72C353.487 431.524 353.357 430.556 353.097 429.815C352.837 429.074 352.427 428.534 351.868 428.196C351.322 427.845 350.594 427.67 349.684 427.67C348.54 427.67 347.533 427.988 346.662 428.625C345.791 429.262 345.069 430.14 344.497 431.258L344.419 432.74L344.068 431.355C344.211 430.12 344.543 428.963 345.063 427.884C345.583 426.805 346.324 425.934 347.286 425.271C348.261 424.608 349.483 424.277 350.952 424.277C352.889 424.277 354.397 424.888 355.476 426.11C356.568 427.332 357.114 429.139 357.114 431.531V446H353.487ZM371.499 446.293C369.562 446.293 367.859 445.87 366.39 445.025C364.934 444.18 363.803 442.938 362.997 441.3C362.191 439.649 361.788 437.634 361.788 435.256C361.788 432.967 362.204 431.004 363.036 429.366C363.868 427.728 365.012 426.474 366.468 425.603C367.924 424.732 369.582 424.296 371.441 424.296C373.287 424.296 374.866 424.693 376.179 425.486C377.505 426.279 378.526 427.416 379.241 428.898C379.956 430.367 380.307 432.129 380.294 434.183C380.294 434.599 380.281 434.943 380.255 435.216C380.229 435.489 380.209 435.775 380.196 436.074H365.415C365.506 438.414 366.091 440.189 367.17 441.398C368.262 442.594 369.653 443.192 371.343 443.192C372.773 443.192 373.878 442.893 374.658 442.295C375.451 441.684 375.952 440.904 376.16 439.955H379.709C379.618 441.307 379.202 442.457 378.461 443.406C377.733 444.355 376.771 445.077 375.575 445.571C374.379 446.052 373.02 446.293 371.499 446.293ZM367.346 433.344H376.647C376.621 431.524 376.173 430.094 375.302 429.054C374.431 428.014 373.098 427.494 371.304 427.494C369.419 427.494 367.989 428.138 367.014 429.425C366.039 430.699 365.506 432.46 365.415 434.709C365.519 434.176 365.727 433.819 366.039 433.637C366.364 433.442 366.8 433.344 367.346 433.344ZM398.857 446.234C397.128 446.234 395.633 445.779 394.372 444.869C393.124 443.959 392.162 442.678 391.486 441.027C390.823 439.376 390.491 437.446 390.491 435.236C390.491 432.792 390.901 430.764 391.72 429.152C392.552 427.527 393.618 426.318 394.918 425.525C396.231 424.719 397.615 424.316 399.071 424.316C400.488 424.316 401.6 424.556 402.406 425.037C403.225 425.518 403.823 426.077 404.2 426.714C404.59 427.338 404.824 427.878 404.902 428.333L406.052 428.528L404.648 429.756C404.557 429.483 404.336 429.171 403.985 428.82C403.634 428.456 403.134 428.144 402.484 427.884C401.834 427.611 401.008 427.475 400.007 427.475C398.33 427.475 396.946 428.105 395.854 429.366C394.762 430.614 394.216 432.597 394.216 435.314C394.216 437.836 394.729 439.773 395.756 441.125C396.796 442.477 398.129 443.153 399.754 443.153C400.768 443.153 401.606 442.977 402.269 442.626C402.945 442.275 403.472 441.846 403.849 441.339C404.239 440.832 404.505 440.358 404.648 439.916L404.843 440.618L404.648 441.339C404.583 441.768 404.44 442.262 404.219 442.821C403.998 443.367 403.667 443.9 403.225 444.42C402.783 444.94 402.204 445.376 401.489 445.727C400.787 446.065 399.91 446.234 398.857 446.234ZM404.668 446L404.648 415.658H408.256L408.275 446H404.668ZM422.877 446.293C420.94 446.293 419.237 445.87 417.768 445.025C416.312 444.18 415.181 442.938 414.375 441.3C413.569 439.649 413.166 437.634 413.166 435.256C413.166 432.967 413.582 431.004 414.414 429.366C415.246 427.728 416.39 426.474 417.846 425.603C419.302 424.732 420.96 424.296 422.819 424.296C424.665 424.296 426.244 424.693 427.557 425.486C428.883 426.279 429.904 427.416 430.619 428.898C431.334 430.367 431.685 432.129 431.672 434.183C431.672 434.599 431.659 434.943 431.633 435.216C431.607 435.489 431.587 435.775 431.574 436.074H416.793C416.884 438.414 417.469 440.189 418.548 441.398C419.64 442.594 421.031 443.192 422.721 443.192C424.151 443.192 425.256 442.893 426.036 442.295C426.829 441.684 427.33 440.904 427.538 439.955H431.087C430.996 441.307 430.58 442.457 429.839 443.406C429.111 444.355 428.149 445.077 426.953 445.571C425.757 446.052 424.398 446.293 422.877 446.293ZM418.724 433.344H428.025C427.999 431.524 427.551 430.094 426.68 429.054C425.809 428.014 424.476 427.494 422.682 427.494C420.797 427.494 419.367 428.138 418.392 429.425C417.417 430.699 416.884 432.46 416.793 434.709C416.897 434.176 417.105 433.819 417.417 433.637C417.742 433.442 418.178 433.344 418.724 433.344ZM443.032 446.332C441.563 446.332 440.217 446.111 438.995 445.668C437.786 445.213 436.805 444.511 436.051 443.562C435.297 442.6 434.874 441.365 434.783 439.857H438.371C438.605 441.157 439.119 442.054 439.912 442.548C440.718 443.029 441.738 443.27 442.973 443.27C443.818 443.27 444.579 443.179 445.255 442.997C445.944 442.815 446.49 442.509 446.893 442.08C447.296 441.651 447.497 441.066 447.497 440.325C447.497 439.753 447.374 439.292 447.127 438.941C446.88 438.59 446.535 438.304 446.093 438.083C445.651 437.849 445.131 437.647 444.533 437.478C443.948 437.309 443.311 437.127 442.622 436.932C441.335 436.555 440.146 436.12 439.054 435.626C437.962 435.119 437.084 434.443 436.421 433.598C435.758 432.753 435.427 431.622 435.427 430.205C435.427 428.463 436.09 427.052 437.416 425.973C438.742 424.881 440.484 424.335 442.642 424.335C444.007 424.335 445.235 424.543 446.327 424.96C447.432 425.375 448.329 426.045 449.018 426.968C449.72 427.878 450.149 429.1 450.305 430.634H446.737C446.607 429.932 446.366 429.34 446.015 428.859C445.677 428.378 445.229 428.014 444.67 427.767C444.111 427.52 443.428 427.397 442.622 427.397C441.946 427.397 441.335 427.494 440.789 427.689C440.243 427.871 439.808 428.164 439.483 428.567C439.158 428.97 438.995 429.503 438.995 430.166C438.995 430.894 439.19 431.479 439.58 431.921C439.97 432.363 440.523 432.733 441.238 433.032C441.953 433.318 442.791 433.604 443.753 433.89C444.494 434.124 445.287 434.371 446.132 434.631C446.977 434.878 447.77 435.21 448.511 435.626C449.265 436.042 449.876 436.601 450.344 437.303C450.825 437.992 451.066 438.895 451.066 440.013C451.066 442.015 450.325 443.569 448.843 444.674C447.361 445.779 445.424 446.332 443.032 446.332ZM464.147 446.351C462.171 446.351 460.455 445.902 458.999 445.005C457.543 444.108 456.418 442.834 455.625 441.183C454.832 439.532 454.436 437.589 454.436 435.353C454.436 433 454.839 431.004 455.645 429.366C456.464 427.728 457.588 426.48 459.018 425.622C460.461 424.751 462.106 424.316 463.952 424.316C465.72 424.316 467.221 424.66 468.456 425.349C469.691 426.025 470.634 426.929 471.284 428.06C471.947 429.191 472.298 430.439 472.337 431.804H468.768C468.742 431.284 468.632 430.77 468.437 430.263C468.242 429.756 467.949 429.301 467.559 428.898C467.169 428.482 466.669 428.151 466.058 427.904C465.46 427.644 464.738 427.514 463.893 427.514C461.93 427.501 460.481 428.183 459.545 429.561C458.609 430.939 458.141 432.831 458.141 435.236C458.141 437.81 458.661 439.773 459.701 441.125C460.741 442.477 462.301 443.153 464.381 443.153C465.187 443.153 465.908 442.971 466.545 442.607C467.182 442.243 467.689 441.768 468.066 441.183C468.456 440.598 468.664 439.974 468.69 439.311H472.259C472.22 440.65 471.843 441.853 471.128 442.919C470.413 443.985 469.451 444.823 468.242 445.434C467.033 446.046 465.668 446.351 464.147 446.351ZM476.713 446V424.706H479.794L480.184 432.896L479.755 431.784C479.846 430.978 480.021 430.14 480.281 429.269C480.554 428.398 480.938 427.585 481.432 426.831C481.939 426.064 482.582 425.447 483.362 424.979C484.155 424.511 485.124 424.277 486.268 424.277C486.489 424.277 486.697 424.29 486.892 424.316C487.1 424.342 487.301 424.374 487.496 424.414V428.255C487.171 428.151 486.827 428.086 486.463 428.06C486.112 428.021 485.78 428.001 485.468 428.001C484.831 428.001 484.188 428.125 483.538 428.372C482.888 428.619 482.283 429.015 481.724 429.561C481.165 430.094 480.704 430.79 480.34 431.648V446H476.713ZM491.174 446V424.842H494.84L494.782 446H491.174ZM493.027 421.43C492.312 421.43 491.701 421.183 491.194 420.689C490.7 420.195 490.453 419.558 490.453 418.778C490.453 418.011 490.7 417.38 491.194 416.886C491.701 416.392 492.312 416.145 493.027 416.145C493.729 416.145 494.327 416.392 494.821 416.886C495.328 417.38 495.581 418.011 495.581 418.778C495.581 419.558 495.328 420.195 494.821 420.689C494.314 421.183 493.716 421.43 493.027 421.43ZM510.656 446.234C509.278 446.234 508.166 445.993 507.321 445.512C506.489 445.018 505.872 444.453 505.469 443.816C505.066 443.179 504.825 442.646 504.747 442.217L503.597 442.022L504.981 441.008C505.098 441.32 505.352 441.651 505.742 442.002C506.132 442.353 506.658 442.659 507.321 442.919C507.997 443.166 508.797 443.289 509.72 443.289C511.319 443.289 512.645 442.633 513.698 441.32C514.764 440.007 515.297 437.946 515.297 435.138C515.297 432.616 514.803 430.718 513.815 429.444C512.84 428.157 511.592 427.514 510.071 427.514C509.044 427.514 508.173 427.676 507.458 428.001C506.756 428.326 506.197 428.723 505.781 429.191C505.378 429.646 505.111 430.088 504.981 430.517V429.074C505.007 428.658 505.137 428.183 505.371 427.65C505.605 427.104 505.963 426.578 506.444 426.071C506.938 425.564 507.568 425.148 508.335 424.823C509.102 424.485 510.038 424.316 511.143 424.316C512.768 424.316 514.172 424.751 515.355 425.622C516.538 426.493 517.448 427.722 518.085 429.308C518.722 430.894 519.041 432.753 519.041 434.885C519.041 436.822 518.8 438.505 518.319 439.935C517.838 441.352 517.188 442.529 516.369 443.465C515.563 444.401 514.66 445.096 513.659 445.551C512.671 446.006 511.67 446.234 510.656 446.234ZM501.374 453.859V424.706H504.942L504.981 427.592V441.008L504.747 442.217L504.981 446.02L505.001 453.859H501.374ZM530.275 446.293C528.624 446.293 527.363 445.87 526.492 445.025C525.634 444.167 525.205 442.951 525.205 441.378V429.834C525.205 429.418 525.289 429.035 525.458 428.684C525.627 428.32 525.874 428.086 526.199 427.982L525.205 425.564V424.901L526.082 418.544H528.793V440.774C528.793 441.606 528.988 442.171 529.378 442.47C529.768 442.756 530.437 442.899 531.386 442.899C532.075 442.899 532.66 442.899 533.141 442.899C533.622 442.886 534.123 442.86 534.643 442.821V446.02C533.928 446.15 533.187 446.228 532.42 446.254C531.666 446.28 530.951 446.293 530.275 446.293ZM522.104 427.982V424.706H534.467V427.982H522.104ZM538.781 446V424.842H542.447L542.389 446H538.781ZM540.634 421.43C539.919 421.43 539.308 421.183 538.801 420.689C538.307 420.195 538.06 419.558 538.06 418.778C538.06 418.011 538.307 417.38 538.801 416.886C539.308 416.392 539.919 416.145 540.634 416.145C541.336 416.145 541.934 416.392 542.428 416.886C542.935 417.38 543.188 418.011 543.188 418.778C543.188 419.558 542.935 420.195 542.428 420.689C541.921 421.183 541.323 421.43 540.634 421.43ZM556.841 446.293C554.969 446.293 553.324 445.87 551.907 445.025C550.503 444.18 549.405 442.938 548.612 441.3C547.832 439.649 547.442 437.628 547.442 435.236C547.442 432.974 547.858 431.024 548.69 429.386C549.522 427.748 550.653 426.493 552.083 425.622C553.526 424.738 555.138 424.296 556.919 424.296C558.856 424.296 560.526 424.738 561.93 425.622C563.347 426.493 564.439 427.748 565.206 429.386C565.973 431.024 566.357 432.974 566.357 435.236C566.357 437.628 565.928 439.649 565.07 441.3C564.225 442.938 563.081 444.18 561.638 445.025C560.195 445.87 558.596 446.293 556.841 446.293ZM556.919 443.094C558.661 443.094 560.052 442.444 561.092 441.144C562.132 439.844 562.652 437.875 562.652 435.236C562.652 432.714 562.138 430.796 561.111 429.483C560.097 428.157 558.674 427.494 556.841 427.494C555.112 427.494 553.727 428.157 552.687 429.483C551.66 430.796 551.147 432.714 551.147 435.236C551.147 437.784 551.667 439.734 552.707 441.086C553.76 442.425 555.164 443.094 556.919 443.094ZM571.28 446V424.706H574.361L574.751 432.74L574.4 431.121C574.569 429.86 574.92 428.716 575.453 427.689C575.999 426.649 576.76 425.824 577.735 425.213C578.723 424.589 579.964 424.277 581.459 424.277C583.435 424.277 584.969 424.888 586.061 426.11C587.166 427.319 587.719 429.126 587.719 431.531V446H584.092V432.72C584.092 431.511 583.955 430.536 583.682 429.795C583.422 429.054 583 428.515 582.415 428.177C581.843 427.839 581.076 427.67 580.114 427.67C578.957 427.67 577.936 427.988 577.052 428.625C576.181 429.262 575.466 430.14 574.907 431.258V446H571.28Z" fill="#ffffff"></path><path d="M979.628 673.276C978.062 673.276 976.718 672.932 975.597 672.246C974.475 671.55 973.615 670.583 973.016 669.346C972.426 668.109 972.131 666.673 972.131 665.039C972.131 663.319 972.436 661.849 973.045 660.631C973.654 659.413 974.499 658.485 975.582 657.847C976.665 657.2 977.912 656.876 979.323 656.876C980.725 656.876 981.899 657.137 982.847 657.659C983.804 658.171 984.519 658.862 984.993 659.732C985.466 660.593 985.684 661.555 985.645 662.618H982.354C982.344 662.193 982.276 661.806 982.151 661.458C982.025 661.1 981.836 660.801 981.585 660.559C981.343 660.308 981.034 660.114 980.657 659.979C980.28 659.844 979.84 659.776 979.338 659.776C977.984 659.766 977.022 660.23 976.452 661.168C975.891 662.106 975.611 663.372 975.611 664.967C975.611 666.784 975.949 668.142 976.626 669.041C977.312 669.931 978.381 670.38 979.831 670.39C980.169 670.39 980.536 670.293 980.933 670.1C981.339 669.897 981.682 669.612 981.962 669.244C982.252 668.867 982.392 668.418 982.383 667.896H985.645C985.684 669.008 985.418 669.965 984.848 670.767C984.287 671.569 983.543 672.188 982.615 672.623C981.687 673.058 980.691 673.276 979.628 673.276ZM994.943 673.218C993.483 673.218 992.212 672.903 991.129 672.275C990.047 671.647 989.206 670.723 988.606 669.505C988.007 668.278 987.707 666.775 987.707 664.996C987.707 663.314 988.021 661.864 988.65 660.646C989.288 659.428 990.158 658.495 991.26 657.847C992.362 657.19 993.609 656.861 995.001 656.861C996.509 656.861 997.799 657.19 998.872 657.847C999.955 658.495 1000.79 659.428 1001.37 660.646C1001.95 661.864 1002.24 663.314 1002.24 664.996C1002.24 666.775 1001.91 668.278 1001.26 669.505C1000.63 670.723 999.757 671.647 998.655 672.275C997.553 672.903 996.315 673.218 994.943 673.218ZM995.001 670.303C996.112 670.303 997.021 669.887 997.727 669.056C998.432 668.225 998.785 666.871 998.785 664.996C998.785 663.256 998.442 661.951 997.756 661.081C997.069 660.211 996.132 659.776 994.943 659.776C993.831 659.776 992.922 660.206 992.217 661.066C991.521 661.927 991.173 663.237 991.173 664.996C991.173 666.784 991.526 668.118 992.231 668.998C992.947 669.868 993.87 670.303 995.001 670.303ZM1005.55 673V657.166H1008.47L1008.85 663.14L1008.61 661.936C1008.72 661.066 1008.95 660.245 1009.29 659.471C1009.63 658.688 1010.15 658.055 1010.84 657.572C1011.52 657.089 1012.44 656.847 1013.59 656.847C1015.09 656.847 1016.25 657.316 1017.07 658.253C1017.89 659.181 1018.31 660.602 1018.31 662.516V673H1014.88V663.705C1014.88 662.797 1014.79 662.067 1014.61 661.516C1014.43 660.965 1014.15 660.569 1013.75 660.327C1013.36 660.076 1012.83 659.95 1012.17 659.95C1011.46 659.95 1010.8 660.163 1010.21 660.588C1009.63 661.004 1009.22 661.477 1008.97 662.009V673H1005.55ZM1026.73 673.232C1025.47 673.232 1024.49 672.913 1023.79 672.275C1023.09 671.627 1022.74 670.704 1022.74 669.505V661.501C1022.74 661.182 1022.81 660.897 1022.94 660.646C1023.08 660.385 1023.28 660.221 1023.54 660.153L1022.74 657.804V657.383L1023.51 652.642H1026.12V668.65C1026.12 669.211 1026.24 669.602 1026.48 669.824C1026.73 670.047 1027.2 670.158 1027.87 670.158C1028.31 670.158 1028.71 670.158 1029.08 670.158C1029.45 670.148 1029.78 670.139 1030.08 670.129V673.044C1029.58 673.131 1029.02 673.184 1028.43 673.203C1027.83 673.222 1027.26 673.232 1026.73 673.232ZM1020.67 660.153V657.166H1030.11V660.153H1020.67ZM1039.37 673.218C1037.84 673.218 1036.51 672.908 1035.39 672.289C1034.28 671.661 1033.43 670.738 1032.83 669.52C1032.23 668.302 1031.93 666.808 1031.93 665.039C1031.93 663.319 1032.24 661.849 1032.87 660.631C1033.51 659.404 1034.38 658.471 1035.49 657.833C1036.61 657.185 1037.88 656.861 1039.32 656.861C1040.74 656.861 1041.96 657.142 1042.96 657.702C1043.98 658.263 1044.75 659.094 1045.28 660.196C1045.81 661.289 1046.08 662.632 1046.08 664.227C1046.08 664.537 1046.07 664.793 1046.05 664.996C1046.04 665.199 1046.03 665.441 1046.01 665.721H1035.33C1035.42 667.335 1035.82 668.524 1036.52 669.288C1037.23 670.042 1038.09 670.419 1039.12 670.419C1040.08 670.419 1040.81 670.216 1041.31 669.81C1041.82 669.394 1042.15 668.93 1042.29 668.418H1045.6C1045.51 669.433 1045.19 670.303 1044.64 671.028C1044.09 671.743 1043.36 672.289 1042.45 672.666C1041.55 673.034 1040.53 673.218 1039.37 673.218ZM1036.9 663.386H1042.67C1042.64 662.226 1042.36 661.332 1041.83 660.704C1041.3 660.066 1040.42 659.747 1039.21 659.747C1037.94 659.747 1037 660.172 1036.38 661.023C1035.76 661.864 1035.41 663.029 1035.33 664.517C1035.41 664.082 1035.58 663.788 1035.83 663.633C1036.08 663.469 1036.44 663.386 1036.9 663.386ZM1049.16 673V657.166H1052.09L1052.47 663.14L1052.22 661.936C1052.33 661.066 1052.56 660.245 1052.9 659.471C1053.25 658.688 1053.77 658.055 1054.45 657.572C1055.14 657.089 1056.06 656.847 1057.21 656.847C1058.7 656.847 1059.86 657.316 1060.69 658.253C1061.51 659.181 1061.92 660.602 1061.92 662.516V673H1058.5V663.705C1058.5 662.797 1058.41 662.067 1058.22 661.516C1058.05 660.965 1057.76 660.569 1057.37 660.327C1056.97 660.076 1056.44 659.95 1055.79 659.95C1055.07 659.95 1054.42 660.163 1053.83 660.588C1053.25 661.004 1052.83 661.477 1052.58 662.009V673H1049.16ZM1070.34 673.232C1069.09 673.232 1068.1 672.913 1067.4 672.275C1066.7 671.627 1066.35 670.704 1066.35 669.505V661.501C1066.35 661.182 1066.42 660.897 1066.56 660.646C1066.69 660.385 1066.89 660.221 1067.15 660.153L1066.35 657.804V657.383L1067.12 652.642H1069.73V668.65C1069.73 669.211 1069.85 669.602 1070.1 669.824C1070.35 670.047 1070.81 670.158 1071.49 670.158C1071.92 670.158 1072.32 670.158 1072.69 670.158C1073.06 670.148 1073.39 670.139 1073.69 670.129V673.044C1073.19 673.131 1072.64 673.184 1072.04 673.203C1071.44 673.222 1070.87 673.232 1070.34 673.232ZM1064.28 660.153V657.166H1073.72V660.153H1064.28Z" fill="#ffffff"></path><path d="M70.018 423.232C68.7613 423.232 67.7802 422.913 67.0745 422.275C66.3785 421.627 66.0305 420.704 66.0305 419.505V411.501C66.0305 411.182 66.0982 410.897 66.2335 410.646C66.3688 410.385 66.567 410.221 66.828 410.153L66.0305 407.804V407.383L66.799 402.642H69.409V418.65C69.409 419.211 69.5298 419.602 69.7715 419.824C70.0228 420.047 70.4868 420.158 71.1635 420.158C71.5985 420.158 71.9997 420.158 72.367 420.158C72.7343 420.148 73.0678 420.139 73.3675 420.129V423.044C72.8648 423.131 72.3138 423.184 71.7145 423.203C71.1152 423.222 70.5497 423.232 70.018 423.232ZM63.957 410.153V407.166H73.3965V410.153H63.957ZM76.6178 423V407.166H80.0833L80.0398 423H76.6178ZM78.3723 404.831C77.7439 404.831 77.2123 404.614 76.7773 404.179C76.3423 403.734 76.1248 403.169 76.1248 402.482C76.1248 401.806 76.3423 401.255 76.7773 400.829C77.2123 400.404 77.7439 400.191 78.3723 400.191C78.9813 400.191 79.5033 400.404 79.9383 400.829C80.3829 401.255 80.6053 401.806 80.6053 402.482C80.6053 403.169 80.3829 403.734 79.9383 404.179C79.5033 404.614 78.9813 404.831 78.3723 404.831ZM88.9076 423.232C87.651 423.232 86.6698 422.913 85.9641 422.275C85.2681 421.627 84.9201 420.704 84.9201 419.505V411.501C84.9201 411.182 84.9878 410.897 85.1231 410.646C85.2585 410.385 85.4566 410.221 85.7176 410.153L84.9201 407.804V407.383L85.6886 402.642H88.2986V418.65C88.2986 419.211 88.4195 419.602 88.6611 419.824C88.9125 420.047 89.3765 420.158 90.0531 420.158C90.4881 420.158 90.8893 420.158 91.2566 420.158C91.624 420.148 91.9575 420.139 92.2571 420.129V423.044C91.7545 423.131 91.2035 423.184 90.6041 423.203C90.0048 423.222 89.4393 423.232 88.9076 423.232ZM82.8466 410.153V407.166H92.2861V410.153H82.8466ZM95.5074 423V400.438H98.9294V423H95.5074ZM109.644 423.218C108.116 423.218 106.792 422.908 105.671 422.289C104.559 421.661 103.704 420.738 103.104 419.52C102.505 418.302 102.205 416.808 102.205 415.039C102.205 413.319 102.519 411.849 103.148 410.631C103.786 409.404 104.661 408.471 105.772 407.833C106.884 407.185 108.16 406.861 109.6 406.861C111.021 406.861 112.234 407.142 113.24 407.702C114.255 408.263 115.028 409.094 115.56 410.196C116.091 411.289 116.357 412.632 116.357 414.227C116.357 414.537 116.348 414.793 116.328 414.996C116.319 415.199 116.304 415.441 116.285 415.721H105.613C105.7 417.335 106.096 418.524 106.802 419.288C107.507 420.042 108.373 420.419 109.397 420.419C110.354 420.419 111.084 420.216 111.587 419.81C112.099 419.394 112.428 418.93 112.573 418.418H115.879C115.792 419.433 115.473 420.303 114.922 421.028C114.371 421.743 113.641 422.289 112.732 422.666C111.833 423.034 110.804 423.218 109.644 423.218ZM107.179 413.386H112.95C112.921 412.226 112.64 411.332 112.109 410.704C111.577 410.066 110.702 409.747 109.484 409.747C108.218 409.747 107.275 410.172 106.657 411.023C106.038 411.864 105.69 413.029 105.613 414.517C105.69 414.082 105.854 413.788 106.106 413.633C106.357 413.469 106.715 413.386 107.179 413.386Z" fill="#ffffff"></path><path d="M378.018 168.232C376.761 168.232 375.78 167.913 375.075 167.275C374.379 166.627 374.031 165.704 374.031 164.505V156.501C374.031 156.182 374.098 155.897 374.234 155.646C374.369 155.385 374.567 155.221 374.828 155.153L374.031 152.804V152.383L374.799 147.642H377.409V163.65C377.409 164.211 377.53 164.602 377.772 164.824C378.023 165.047 378.487 165.158 379.164 165.158C379.599 165.158 380 165.158 380.367 165.158C380.734 165.148 381.068 165.139 381.368 165.129V168.044C380.865 168.131 380.314 168.184 379.715 168.203C379.115 168.222 378.55 168.232 378.018 168.232ZM371.957 155.153V152.166H381.397V155.153H371.957ZM384.589 168V152.166H387.518L387.895 158.27L387.59 157.429C387.658 156.791 387.784 156.144 387.967 155.486C388.161 154.829 388.431 154.225 388.779 153.674C389.137 153.123 389.591 152.683 390.142 152.355C390.703 152.016 391.384 151.847 392.187 151.847C392.38 151.847 392.573 151.857 392.767 151.876C392.96 151.895 393.139 151.929 393.303 151.977V155.631C392.975 155.525 392.622 155.457 392.245 155.428C391.877 155.39 391.539 155.37 391.23 155.37C390.853 155.37 390.447 155.448 390.012 155.602C389.577 155.747 389.176 155.97 388.808 156.269C388.441 156.569 388.175 156.941 388.011 157.386V168H384.589ZM395.861 168V152.166H399.326L399.283 168H395.861ZM397.615 149.831C396.987 149.831 396.455 149.614 396.02 149.179C395.585 148.734 395.368 148.169 395.368 147.482C395.368 146.806 395.585 146.255 396.02 145.829C396.455 145.404 396.987 145.191 397.615 145.191C398.224 145.191 398.746 145.404 399.181 145.829C399.626 146.255 399.848 146.806 399.848 147.482C399.848 148.169 399.626 148.734 399.181 149.179C398.746 149.614 398.224 149.831 397.615 149.831ZM409.857 174.467C408.571 174.467 407.411 174.254 406.377 173.829C405.352 173.413 404.56 172.775 403.999 171.915C403.438 171.055 403.221 169.977 403.347 168.682H406.653C406.643 169.233 406.711 169.726 406.856 170.161C407.001 170.605 407.305 170.958 407.769 171.219C408.233 171.48 408.939 171.611 409.886 171.611C410.708 171.611 411.336 171.495 411.771 171.263C412.216 171.031 412.515 170.678 412.67 170.204C412.825 169.73 412.902 169.117 412.902 168.363V164.07C412.815 164.525 412.627 165.003 412.337 165.506C412.047 166.009 411.597 166.434 410.988 166.782C410.379 167.12 409.557 167.289 408.523 167.289C407.585 167.289 406.749 167.082 406.015 166.666C405.28 166.25 404.656 165.69 404.144 164.984C403.632 164.278 403.24 163.486 402.97 162.606C402.709 161.717 402.578 160.798 402.578 159.851C402.578 158.092 402.868 156.622 403.448 155.443C404.038 154.264 404.797 153.374 405.725 152.775C406.653 152.176 407.634 151.876 408.668 151.876C409.586 151.876 410.326 152.002 410.887 152.253C411.457 152.504 411.902 152.809 412.221 153.166C412.54 153.524 412.772 153.877 412.917 154.225L412.931 152.18H416.281V168.334C416.281 169.764 416 170.929 415.44 171.828C414.889 172.727 414.13 173.384 413.163 173.8C412.196 174.225 411.094 174.448 409.857 174.467ZM409.698 164.549C410.423 164.549 411.007 164.452 411.452 164.259C411.897 164.056 412.235 163.819 412.467 163.548C412.699 163.268 412.844 163.026 412.902 162.823V156.197C412.805 155.965 412.627 155.738 412.366 155.515C412.105 155.293 411.761 155.109 411.336 154.964C410.911 154.819 410.389 154.747 409.77 154.747C408.697 154.747 407.817 155.143 407.131 155.936C406.445 156.729 406.102 157.971 406.102 159.662C406.102 161.199 406.44 162.398 407.117 163.258C407.803 164.119 408.663 164.549 409.698 164.549ZM426.849 174.467C425.564 174.467 424.404 174.254 423.369 173.829C422.345 173.413 421.552 172.775 420.991 171.915C420.431 171.055 420.213 169.977 420.339 168.682H423.645C423.635 169.233 423.703 169.726 423.848 170.161C423.993 170.605 424.297 170.958 424.761 171.219C425.225 171.48 425.931 171.611 426.878 171.611C427.7 171.611 428.328 171.495 428.763 171.263C429.208 171.031 429.508 170.678 429.662 170.204C429.817 169.73 429.894 169.117 429.894 168.363V164.07C429.807 164.525 429.619 165.003 429.329 165.506C429.039 166.009 428.589 166.434 427.98 166.782C427.371 167.12 426.55 167.289 425.515 167.289C424.578 167.289 423.741 167.082 423.007 166.666C422.272 166.25 421.649 165.69 421.136 164.984C420.624 164.278 420.232 163.486 419.962 162.606C419.701 161.717 419.57 160.798 419.57 159.851C419.57 158.092 419.86 156.622 420.44 155.443C421.03 154.264 421.789 153.374 422.717 152.775C423.645 152.176 424.626 151.876 425.66 151.876C426.579 151.876 427.318 152.002 427.879 152.253C428.449 152.504 428.894 152.809 429.213 153.166C429.532 153.524 429.764 153.877 429.909 154.225L429.923 152.18H433.273V168.334C433.273 169.764 432.992 170.929 432.432 171.828C431.881 172.727 431.122 173.384 430.155 173.8C429.189 174.225 428.087 174.448 426.849 174.467ZM426.69 164.549C427.415 164.549 428 164.452 428.444 164.259C428.889 164.056 429.227 163.819 429.459 163.548C429.691 163.268 429.836 163.026 429.894 162.823V156.197C429.798 155.965 429.619 155.738 429.358 155.515C429.097 155.293 428.754 155.109 428.328 154.964C427.903 154.819 427.381 154.747 426.762 154.747C425.689 154.747 424.81 155.143 424.123 155.936C423.437 156.729 423.094 157.971 423.094 159.662C423.094 161.199 423.432 162.398 424.109 163.258C424.795 164.119 425.655 164.549 426.69 164.549ZM443.897 168.218C442.369 168.218 441.045 167.908 439.924 167.289C438.812 166.661 437.957 165.738 437.357 164.52C436.758 163.302 436.458 161.808 436.458 160.039C436.458 158.319 436.772 156.849 437.401 155.631C438.039 154.404 438.914 153.471 440.025 152.833C441.137 152.185 442.413 151.861 443.853 151.861C445.274 151.861 446.487 152.142 447.493 152.702C448.508 153.263 449.281 154.094 449.813 155.196C450.344 156.289 450.61 157.632 450.61 159.227C450.61 159.537 450.601 159.793 450.581 159.996C450.572 160.199 450.557 160.441 450.538 160.721H439.866C439.953 162.335 440.349 163.524 441.055 164.288C441.76 165.042 442.626 165.419 443.65 165.419C444.607 165.419 445.337 165.216 445.84 164.81C446.352 164.394 446.681 163.93 446.826 163.418H450.132C450.045 164.433 449.726 165.303 449.175 166.028C448.624 166.743 447.894 167.289 446.985 167.666C446.086 168.034 445.057 168.218 443.897 168.218ZM441.432 158.386H447.203C447.174 157.226 446.893 156.332 446.362 155.704C445.83 155.066 444.955 154.747 443.737 154.747C442.471 154.747 441.528 155.172 440.91 156.023C440.291 156.864 439.943 158.029 439.866 159.517C439.943 159.082 440.107 158.788 440.359 158.633C440.61 158.469 440.968 158.386 441.432 158.386ZM453.69 168V152.166H456.619L456.996 158.27L456.692 157.429C456.759 156.791 456.885 156.144 457.069 155.486C457.262 154.829 457.533 154.225 457.881 153.674C458.238 153.123 458.693 152.683 459.244 152.355C459.804 152.016 460.486 151.847 461.288 151.847C461.482 151.847 461.675 151.857 461.868 151.876C462.062 151.895 462.24 151.929 462.405 151.977V155.631C462.076 155.525 461.723 155.457 461.346 155.428C460.979 155.39 460.641 155.37 460.331 155.37C459.954 155.37 459.548 155.448 459.113 155.602C458.678 155.747 458.277 155.97 457.91 156.269C457.542 156.569 457.277 156.941 457.112 157.386V168H453.69Z" fill="#ffffff"></path><path d="M1007.1 191.174C1006.14 191.174 1005.28 190.995 1004.54 190.637C1003.79 190.27 1003.21 189.763 1002.78 189.115C1002.37 188.467 1002.16 187.718 1002.16 186.867C1002.16 185.93 1002.33 185.156 1002.67 184.547C1003.01 183.938 1003.49 183.455 1004.13 183.097C1004.78 182.73 1005.54 182.45 1006.41 182.256C1007.03 182.121 1007.68 182.01 1008.37 181.923C1009.06 181.836 1009.7 181.768 1010.29 181.72C1010.88 181.662 1011.34 181.623 1011.66 181.604V180.966C1011.66 179.893 1011.44 179.091 1011.01 178.559C1010.58 178.018 1009.85 177.747 1008.83 177.747C1008.17 177.747 1007.62 177.829 1007.18 177.993C1006.73 178.148 1006.39 178.448 1006.16 178.892C1005.94 179.327 1005.82 179.965 1005.8 180.806H1002.68C1002.58 179.443 1002.77 178.327 1003.26 177.457C1003.76 176.577 1004.51 175.93 1005.5 175.514C1006.49 175.089 1007.67 174.876 1009.02 174.876C1009.82 174.876 1010.57 174.968 1011.28 175.151C1012 175.325 1012.63 175.63 1013.18 176.065C1013.73 176.49 1014.17 177.075 1014.49 177.819C1014.8 178.564 1014.96 179.506 1014.96 180.647V191H1011.61L1011.66 187.447C1011.47 188.52 1011.01 189.41 1010.27 190.115C1009.52 190.821 1008.47 191.174 1007.1 191.174ZM1008.02 188.593C1008.52 188.593 1009.03 188.506 1009.54 188.332C1010.06 188.158 1010.52 187.907 1010.9 187.578C1011.3 187.249 1011.55 186.863 1011.66 186.418V183.518C1011.27 183.557 1010.81 183.624 1010.28 183.721C1009.76 183.818 1009.31 183.905 1008.93 183.982C1007.85 184.204 1007.07 184.499 1006.58 184.866C1006.11 185.224 1005.87 185.775 1005.87 186.519C1005.87 186.945 1005.97 187.317 1006.16 187.636C1006.37 187.945 1006.63 188.182 1006.96 188.346C1007.29 188.511 1007.64 188.593 1008.02 188.593ZM1019.18 191V175.166H1022.11L1022.48 181.27L1022.18 180.429C1022.25 179.791 1022.37 179.144 1022.56 178.486C1022.75 177.829 1023.02 177.225 1023.37 176.674C1023.72 176.123 1024.18 175.683 1024.73 175.355C1025.29 175.016 1025.97 174.847 1026.77 174.847C1026.97 174.847 1027.16 174.857 1027.35 174.876C1027.55 174.895 1027.73 174.929 1027.89 174.977V178.631C1027.56 178.525 1027.21 178.457 1026.83 178.428C1026.47 178.39 1026.13 178.37 1025.82 178.37C1025.44 178.37 1025.03 178.448 1024.6 178.602C1024.16 178.747 1023.76 178.97 1023.4 179.269C1023.03 179.569 1022.76 179.941 1022.6 180.386V191H1019.18ZM1030.42 191V175.166H1033.35L1033.73 181.27L1033.42 180.429C1033.49 179.791 1033.61 179.144 1033.8 178.486C1033.99 177.829 1034.26 177.225 1034.61 176.674C1034.97 176.123 1035.42 175.683 1035.97 175.355C1036.53 175.016 1037.22 174.847 1038.02 174.847C1038.21 174.847 1038.4 174.857 1038.6 174.876C1038.79 174.895 1038.97 174.929 1039.13 174.977V178.631C1038.81 178.525 1038.45 178.457 1038.08 178.428C1037.71 178.39 1037.37 178.37 1037.06 178.37C1036.68 178.37 1036.28 178.448 1035.84 178.602C1035.41 178.747 1035.01 178.97 1034.64 179.269C1034.27 179.569 1034.01 179.941 1033.84 180.386V191H1030.42ZM1047.66 191.218C1046.2 191.218 1044.92 190.903 1043.84 190.275C1042.76 189.647 1041.92 188.723 1041.32 187.505C1040.72 186.278 1040.42 184.775 1040.42 182.996C1040.42 181.314 1040.73 179.864 1041.36 178.646C1042 177.428 1042.87 176.495 1043.97 175.847C1045.07 175.19 1046.32 174.861 1047.71 174.861C1049.22 174.861 1050.51 175.19 1051.59 175.847C1052.67 176.495 1053.5 177.428 1054.08 178.646C1054.66 179.864 1054.95 181.314 1054.95 182.996C1054.95 184.775 1054.63 186.278 1053.98 187.505C1053.34 188.723 1052.47 189.647 1051.37 190.275C1050.27 190.903 1049.03 191.218 1047.66 191.218ZM1047.71 188.303C1048.83 188.303 1049.73 187.887 1050.44 187.056C1051.15 186.225 1051.5 184.871 1051.5 182.996C1051.5 181.256 1051.15 179.951 1050.47 179.081C1049.78 178.211 1048.84 177.776 1047.66 177.776C1046.54 177.776 1045.64 178.206 1044.93 179.066C1044.23 179.927 1043.89 181.237 1043.89 182.996C1043.89 184.784 1044.24 186.118 1044.94 186.998C1045.66 187.868 1046.58 188.303 1047.71 188.303ZM1061.15 191L1056.35 175.18H1060.1L1062.07 183.039L1063.05 188.085L1063.22 188.1L1064 183.025L1065.9 175.18H1070.21L1072.08 183.054L1072.85 188.259L1073.06 188.245L1074.05 183.054L1076.02 175.18H1079.76L1074.98 191H1070.98L1069.08 183.46L1068.19 178.878H1067.95L1067.02 183.474L1065.13 191H1061.15Z" fill="#ffffff"></path><path d="M243.439 691.174C242.076 691.174 240.935 690.821 240.017 690.115C239.098 689.41 238.407 688.443 237.943 687.215C237.479 685.978 237.247 684.572 237.247 682.996C237.247 681.208 237.547 679.714 238.146 678.515C238.755 677.307 239.538 676.398 240.495 675.789C241.452 675.18 242.472 674.876 243.555 674.876C244.608 674.876 245.435 675.05 246.034 675.398C246.633 675.746 247.073 676.152 247.354 676.616C247.634 677.08 247.813 677.496 247.89 677.863L248.891 677.993L247.702 679.226C247.624 678.984 247.47 678.752 247.238 678.53C247.015 678.298 246.691 678.109 246.266 677.964C245.85 677.819 245.309 677.747 244.642 677.747C243.511 677.747 242.578 678.163 241.844 678.994C241.109 679.825 240.742 681.183 240.742 683.068C240.742 684.76 241.075 686.07 241.742 686.998C242.419 687.926 243.298 688.39 244.381 688.39C245.116 688.39 245.71 688.269 246.165 688.027C246.629 687.786 246.986 687.51 247.238 687.201C247.489 686.882 247.644 686.621 247.702 686.418L247.847 686.911L247.702 687.433C247.653 687.742 247.557 688.11 247.412 688.535C247.267 688.951 247.035 689.361 246.716 689.767C246.406 690.173 245.986 690.512 245.454 690.782C244.922 691.043 244.251 691.174 243.439 691.174ZM247.716 691L247.702 668.438H251.109V691H247.716ZM261.772 691.218C260.244 691.218 258.92 690.908 257.799 690.289C256.687 689.661 255.832 688.738 255.232 687.52C254.633 686.302 254.333 684.808 254.333 683.039C254.333 681.319 254.647 679.849 255.276 678.631C255.914 677.404 256.789 676.471 257.9 675.833C259.012 675.185 260.288 674.861 261.728 674.861C263.149 674.861 264.362 675.142 265.368 675.702C266.383 676.263 267.156 677.094 267.688 678.196C268.219 679.289 268.485 680.632 268.485 682.227C268.485 682.537 268.476 682.793 268.456 682.996C268.447 683.199 268.432 683.441 268.413 683.721H257.741C257.828 685.335 258.224 686.524 258.93 687.288C259.635 688.042 260.501 688.419 261.525 688.419C262.482 688.419 263.212 688.216 263.715 687.81C264.227 687.394 264.556 686.93 264.701 686.418H268.007C267.92 687.433 267.601 688.303 267.05 689.028C266.499 689.743 265.769 690.289 264.86 690.666C263.961 691.034 262.932 691.218 261.772 691.218ZM259.307 681.386H265.078C265.049 680.226 264.768 679.332 264.237 678.704C263.705 678.066 262.83 677.747 261.612 677.747C260.346 677.747 259.403 678.172 258.785 679.023C258.166 679.864 257.818 681.029 257.741 682.517C257.818 682.082 257.982 681.788 258.234 681.633C258.485 681.469 258.843 681.386 259.307 681.386ZM277.283 691.247C276.094 691.247 275.031 691.073 274.093 690.724C273.165 690.376 272.426 689.84 271.875 689.115C271.333 688.38 271.034 687.443 270.976 686.302H274.282C274.407 687.114 274.731 687.689 275.253 688.027C275.785 688.366 276.437 688.535 277.211 688.535C277.771 688.535 278.269 688.482 278.704 688.375C279.149 688.259 279.497 688.071 279.748 687.81C280.009 687.539 280.14 687.177 280.14 686.722C280.14 686.403 280.067 686.142 279.922 685.939C279.787 685.727 279.574 685.543 279.284 685.388C279.004 685.234 278.646 685.089 278.211 684.953C277.786 684.818 277.293 684.668 276.732 684.504C275.727 684.214 274.813 683.871 273.992 683.474C273.17 683.078 272.518 682.561 272.034 681.923C271.551 681.275 271.309 680.434 271.309 679.4C271.309 677.989 271.831 676.887 272.875 676.094C273.919 675.292 275.263 674.89 276.906 674.89C277.97 674.89 278.927 675.045 279.777 675.355C280.638 675.654 281.343 676.157 281.894 676.862C282.445 677.558 282.803 678.506 282.967 679.704L279.661 679.69C279.516 679.129 279.304 678.699 279.023 678.399C278.743 678.09 278.419 677.877 278.052 677.761C277.694 677.636 277.303 677.573 276.877 677.573C276.413 677.573 276.012 677.645 275.674 677.79C275.335 677.935 275.074 678.138 274.891 678.399C274.707 678.66 274.615 678.975 274.615 679.342C274.615 679.767 274.736 680.125 274.978 680.415C275.229 680.695 275.601 680.942 276.094 681.154C276.597 681.357 277.22 681.57 277.965 681.792C278.564 681.966 279.183 682.16 279.821 682.372C280.459 682.575 281.053 682.836 281.604 683.155C282.155 683.474 282.6 683.9 282.938 684.431C283.277 684.953 283.446 685.635 283.446 686.476C283.446 687.974 282.88 689.144 281.749 689.985C280.628 690.826 279.139 691.247 277.283 691.247ZM293.282 691.276C291.716 691.276 290.372 690.932 289.251 690.246C288.129 689.55 287.269 688.583 286.67 687.346C286.08 686.109 285.785 684.673 285.785 683.039C285.785 681.319 286.09 679.849 286.699 678.631C287.308 677.413 288.154 676.485 289.236 675.847C290.319 675.2 291.566 674.876 292.977 674.876C294.379 674.876 295.553 675.137 296.501 675.659C297.458 676.171 298.173 676.862 298.647 677.732C299.12 678.593 299.338 679.555 299.299 680.618H296.008C295.998 680.193 295.93 679.806 295.805 679.458C295.679 679.1 295.491 678.801 295.239 678.559C294.998 678.308 294.688 678.114 294.311 677.979C293.934 677.844 293.494 677.776 292.992 677.776C291.638 677.766 290.677 678.23 290.106 679.168C289.546 680.106 289.265 681.372 289.265 682.967C289.265 684.784 289.604 686.142 290.28 687.041C290.967 687.931 292.035 688.38 293.485 688.39C293.823 688.39 294.19 688.293 294.587 688.1C294.993 687.897 295.336 687.612 295.616 687.244C295.906 686.867 296.046 686.418 296.037 685.896H299.299C299.338 687.008 299.072 687.965 298.502 688.767C297.941 689.569 297.197 690.188 296.269 690.623C295.341 691.058 294.345 691.276 293.282 691.276ZM302.378 691V675.166H305.307L305.684 681.27L305.379 680.429C305.447 679.791 305.573 679.144 305.756 678.486C305.95 677.829 306.22 677.225 306.568 676.674C306.926 676.123 307.38 675.683 307.931 675.355C308.492 675.016 309.173 674.847 309.976 674.847C310.169 674.847 310.362 674.857 310.556 674.876C310.749 674.895 310.928 674.929 311.092 674.977V678.631C310.764 678.525 310.411 678.457 310.034 678.428C309.666 678.39 309.328 678.37 309.019 678.37C308.642 678.37 308.236 678.448 307.801 678.602C307.366 678.747 306.965 678.97 306.597 679.269C306.23 679.569 305.964 679.941 305.8 680.386V691H302.378ZM313.65 691V675.166H317.115L317.072 691H313.65ZM315.404 672.831C314.776 672.831 314.244 672.614 313.809 672.179C313.374 671.734 313.157 671.169 313.157 670.482C313.157 669.806 313.374 669.255 313.809 668.829C314.244 668.404 314.776 668.191 315.404 668.191C316.013 668.191 316.535 668.404 316.97 668.829C317.415 669.255 317.637 669.806 317.637 670.482C317.637 671.169 317.415 671.734 316.97 672.179C316.535 672.614 316.013 672.831 315.404 672.831ZM329.036 691.174C327.992 691.174 327.161 691 326.542 690.652C325.923 690.304 325.469 689.898 325.179 689.434C324.889 688.96 324.705 688.545 324.628 688.187L323.468 688.245L324.817 687.099C324.884 687.341 325.034 687.578 325.266 687.81C325.498 688.032 325.836 688.216 326.281 688.361C326.726 688.496 327.272 688.564 327.92 688.564C329.002 688.564 329.892 688.143 330.588 687.302C331.293 686.461 331.646 685.055 331.646 683.083C331.646 681.382 331.317 680.077 330.66 679.168C330.003 678.25 329.162 677.79 328.137 677.79C327.412 677.79 326.813 677.892 326.339 678.095C325.875 678.298 325.522 678.535 325.281 678.805C325.039 679.076 324.884 679.318 324.817 679.53V678.443C324.836 678.124 324.918 677.766 325.063 677.37C325.218 676.964 325.464 676.572 325.803 676.195C326.151 675.809 326.605 675.495 327.166 675.253C327.736 675.002 328.442 674.876 329.283 674.876C330.559 674.876 331.632 675.219 332.502 675.905C333.372 676.592 334.029 677.534 334.474 678.733C334.928 679.922 335.155 681.275 335.155 682.793C335.155 684.195 334.981 685.422 334.633 686.476C334.295 687.52 333.831 688.39 333.241 689.086C332.661 689.782 332.009 690.304 331.284 690.652C330.559 691 329.809 691.174 329.036 691.174ZM321.409 696.844V675.166H324.773L324.817 677.355V687.23L324.628 688.187L324.817 691.015V696.844H321.409ZM343.159 691.232C341.902 691.232 340.921 690.913 340.215 690.275C339.519 689.627 339.171 688.704 339.171 687.505V679.501C339.171 679.182 339.239 678.897 339.374 678.646C339.509 678.385 339.708 678.221 339.969 678.153L339.171 675.804V675.383L339.94 670.642H342.55V686.65C342.55 687.211 342.67 687.602 342.912 687.824C343.163 688.047 343.627 688.158 344.304 688.158C344.739 688.158 345.14 688.158 345.508 688.158C345.875 688.148 346.208 688.139 346.508 688.129V691.044C346.005 691.131 345.454 691.184 344.855 691.203C344.256 691.222 343.69 691.232 343.159 691.232ZM337.098 678.153V675.166H346.537V678.153H337.098ZM349.758 691V675.166H353.224L353.18 691H349.758ZM351.513 672.831C350.885 672.831 350.353 672.614 349.918 672.179C349.483 671.734 349.265 671.169 349.265 670.482C349.265 669.806 349.483 669.255 349.918 668.829C350.353 668.404 350.885 668.191 351.513 668.191C352.122 668.191 352.644 668.404 353.079 668.829C353.524 669.255 353.746 669.806 353.746 670.482C353.746 671.169 353.524 671.734 353.079 672.179C352.644 672.614 352.122 672.831 351.513 672.831ZM363.708 691.218C362.249 691.218 360.977 690.903 359.895 690.275C358.812 689.647 357.971 688.723 357.372 687.505C356.772 686.278 356.473 684.775 356.473 682.996C356.473 681.314 356.787 679.864 357.415 678.646C358.053 677.428 358.923 676.495 360.025 675.847C361.127 675.19 362.374 674.861 363.766 674.861C365.274 674.861 366.565 675.19 367.638 675.847C368.72 676.495 369.552 677.428 370.132 678.646C370.712 679.864 371.002 681.314 371.002 682.996C371.002 684.775 370.678 686.278 370.03 687.505C369.392 688.723 368.522 689.647 367.42 690.275C366.318 690.903 365.081 691.218 363.708 691.218ZM363.766 688.303C364.878 688.303 365.787 687.887 366.492 687.056C367.198 686.225 367.551 684.871 367.551 682.996C367.551 681.256 367.208 679.951 366.521 679.081C365.835 678.211 364.897 677.776 363.708 677.776C362.597 677.776 361.688 678.206 360.982 679.066C360.286 679.927 359.938 681.237 359.938 682.996C359.938 684.784 360.291 686.118 360.997 686.998C361.712 687.868 362.635 688.303 363.766 688.303ZM374.311 691V675.166H377.24L377.617 681.14L377.371 679.936C377.487 679.066 377.714 678.245 378.052 677.471C378.4 676.688 378.918 676.055 379.604 675.572C380.29 675.089 381.209 674.847 382.359 674.847C383.857 674.847 385.017 675.316 385.839 676.253C386.661 677.181 387.071 678.602 387.071 680.516V691H383.649V681.705C383.649 680.797 383.558 680.067 383.374 679.516C383.2 678.965 382.915 678.569 382.518 678.327C382.122 678.076 381.595 677.95 380.938 677.95C380.223 677.95 379.57 678.163 378.98 678.588C378.4 679.004 377.985 679.477 377.733 680.009V691H374.311Z" fill="#ffffff"></path><path d="M87 390.5V344H255" stroke="#ff0000" stroke-width="4"></path><path d="M1023 546V639" stroke="#ff0000" stroke-width="4"></path><path d="M313 472L313 655.5" stroke="#ff0000" stroke-width="4"></path><path d="M736.5 214L679 271.5H794L736.5 214Z" fill="#2d1510"></path><rect x="639" y="120" width="178" height="74" fill="#641f16"></rect><path d="M693.458 171L684.585 142.647H688.719L692.561 156.004L695.759 167.548H695.993L699.191 156.004L703.052 142.647H707.186L698.352 171H693.458ZM711.295 171V149.842H714.961L714.903 171H711.295ZM713.148 146.43C712.433 146.43 711.822 146.183 711.315 145.689C710.821 145.195 710.574 144.558 710.574 143.778C710.574 143.011 710.821 142.38 711.315 141.886C711.822 141.392 712.433 141.145 713.148 141.145C713.85 141.145 714.448 141.392 714.942 141.886C715.449 142.38 715.702 143.011 715.702 143.778C715.702 144.558 715.449 145.195 714.942 145.689C714.435 146.183 713.837 146.43 713.148 146.43ZM729.606 171.293C727.669 171.293 725.966 170.87 724.497 170.025C723.041 169.18 721.91 167.938 721.104 166.3C720.298 164.649 719.895 162.634 719.895 160.256C719.895 157.967 720.311 156.004 721.143 154.366C721.975 152.728 723.119 151.474 724.575 150.603C726.031 149.732 727.688 149.296 729.547 149.296C731.393 149.296 732.973 149.693 734.286 150.486C735.612 151.279 736.632 152.416 737.347 153.898C738.062 155.367 738.413 157.129 738.4 159.183C738.4 159.599 738.387 159.943 738.361 160.216C738.335 160.489 738.316 160.775 738.303 161.074H723.522C723.613 163.414 724.198 165.189 725.277 166.398C726.369 167.594 727.76 168.192 729.45 168.192C730.88 168.192 731.985 167.893 732.765 167.295C733.558 166.684 734.058 165.904 734.266 164.955H737.815C737.724 166.307 737.308 167.457 736.567 168.406C735.839 169.355 734.877 170.077 733.681 170.571C732.485 171.052 731.127 171.293 729.606 171.293ZM725.452 158.344H734.754C734.728 156.524 734.279 155.094 733.408 154.054C732.537 153.014 731.205 152.494 729.411 152.494C727.526 152.494 726.096 153.138 725.121 154.425C724.146 155.699 723.613 157.46 723.522 159.709C723.626 159.176 723.834 158.819 724.146 158.637C724.471 158.442 724.906 158.344 725.452 158.344ZM746.874 171L740.244 149.725H744.3L747.069 159.983L748.883 167.841H749.078L750.54 160.06L753.153 149.725H757.736L760.29 160.08L761.772 167.997L761.967 167.977L763.82 160.002L766.589 149.725H770.625L764.015 171H759.725L756.956 160.392L755.571 153.762H755.337L753.914 160.411L751.164 171H746.874Z" fill="#ffffff"></path><rect x="639" y="120" width="178" height="74" stroke="#441813" stroke-width="4"></rect><path d="M477 157H639" stroke="#ff0000" stroke-width="4"></path><path d="M981 183H910V237H757" stroke="#ff0000" stroke-width="4"></path></svg></div></astro-island>
<h2 id="examples">Examples</h2>
<p>Learn how to use the <code class="code code--size_md code--variant_outline">Popover</code> component in your project. Let’s take a look at
the most basic example:</p>
<astro-island uid="Bj2cH" prefix="r67" component-url="/_astro/code-examples.XbCqsuUr.js" component-export="CodeExamples" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"CodeExamples","value":true}" await-children=""><div data-scope="tabs" data-part="root" id="tabs::r67R0:" data-orientation="horizontal" dir="ltr" react="[object Object]" solid="[object Object]" vue="[object Object]" class="tabs__root tabs__root--size_sm tabs__root--variant_line not-prose"><div data-scope="tabs" data-part="list" id="tabs::r67R0::list" role="tablist" dir="ltr" aria-orientation="horizontal" data-orientation="horizontal" class="bg_bg.muted px_4 pt_3 rounded-t_l3 tabs__list tabs__list--size_sm tabs__list--variant_line"><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="react" aria-selected="true" data-selected="" aria-controls="tabs::r67R0::content-react" data-ownedby="tabs::r67R0::list" id="tabs::r67R0::trigger-react" tabindex="0" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">React</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="solid" aria-selected="false" aria-controls="tabs::r67R0::content-solid" data-ownedby="tabs::r67R0::list" id="tabs::r67R0::trigger-solid" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Solid</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="vue" aria-selected="false" aria-controls="tabs::r67R0::content-vue" data-ownedby="tabs::r67R0::list" id="tabs::r67R0::trigger-vue" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Vue</button><div id="tabs::r67R0::indicator" data-scope="tabs" data-part="indicator" dir="ltr" data-orientation="horizontal" style="--transition-property: left, right, top, bottom, width, height; --left: 16px; --top: 12px; --width: 59px; --height: 36px; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); left: var(--left);" class="tabs__indicator tabs__indicator--size_sm tabs__indicator--variant_line"></div></div><div class="rounded-b_l3 overflow_hidden bg_grayPalette.900"><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r67R0::content-react" aria-labelledby="tabs::r67R0::trigger-react" role="tabpanel" data-ownedby="tabs::r67R0::list" data-selected="" data-orientation="horizontal" data-state="open" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="react"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/react'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Basic</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{</span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)">}</</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r67R0::content-solid" tabindex="0" aria-labelledby="tabs::r67R0::trigger-solid" role="tabpanel" data-ownedby="tabs::r67R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="solid"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/solid'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Basic</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{</span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)">}</</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r67R0::content-vue" tabindex="0" aria-labelledby="tabs::r67R0::trigger-vue" role="tabpanel" data-ownedby="tabs::r67R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="vue"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-token-function)"> setup</span><span style="color:var(--astro-code-token-function)"> lang</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-string-expression)">"ts"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { ref } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'vue'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/vue'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-constant)"> open</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-token-function)"> ref</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{{ </span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)"> }}</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span></code></pre></astro-slot></div></div></div></astro-island>
<h3 id="using-a-portal">Using a Portal</h3>
<p>By default, the popover is rendered in the same DOM hierarchy as the trigger. To
render the popover within a portal, set the <code class="code code--size_md code--variant_outline">portalled</code> prop to <code class="code code--size_md code--variant_outline">true</code>.</p>
<blockquote>
<p>Note: This requires that you render the component within a <code class="code code--size_md code--variant_outline">Portal</code> based on
the framework you use.</p>
</blockquote>
<astro-island uid="ZIxjVd" prefix="r68" component-url="/_astro/code-examples.XbCqsuUr.js" component-export="CodeExamples" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"CodeExamples","value":true}" await-children=""><div data-scope="tabs" data-part="root" id="tabs::r68R0:" data-orientation="horizontal" dir="ltr" react="[object Object]" solid="[object Object]" vue="[object Object]" class="tabs__root tabs__root--size_sm tabs__root--variant_line not-prose"><div data-scope="tabs" data-part="list" id="tabs::r68R0::list" role="tablist" dir="ltr" aria-orientation="horizontal" data-orientation="horizontal" class="bg_bg.muted px_4 pt_3 rounded-t_l3 tabs__list tabs__list--size_sm tabs__list--variant_line"><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="react" aria-selected="true" data-selected="" aria-controls="tabs::r68R0::content-react" data-ownedby="tabs::r68R0::list" id="tabs::r68R0::trigger-react" tabindex="0" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">React</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="solid" aria-selected="false" aria-controls="tabs::r68R0::content-solid" data-ownedby="tabs::r68R0::list" id="tabs::r68R0::trigger-solid" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Solid</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="vue" aria-selected="false" aria-controls="tabs::r68R0::content-vue" data-ownedby="tabs::r68R0::list" id="tabs::r68R0::trigger-vue" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Vue</button><div id="tabs::r68R0::indicator" data-scope="tabs" data-part="indicator" dir="ltr" data-orientation="horizontal" style="--transition-property: left, right, top, bottom, width, height; --left: 16px; --top: 12px; --width: 59px; --height: 36px; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); left: var(--left);" class="tabs__indicator tabs__indicator--size_sm tabs__indicator--variant_line"></div></div><div class="rounded-b_l3 overflow_hidden bg_grayPalette.900"><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r68R0::content-react" aria-labelledby="tabs::r68R0::trigger-react" role="tabpanel" data-ownedby="tabs::r68R0::list" data-selected="" data-orientation="horizontal" data-state="open" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="react"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-color-text)"> Portal } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/react'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Portalled</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> portalled</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{</span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)">}</</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Portal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Portal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r68R0::content-solid" tabindex="0" aria-labelledby="tabs::r68R0::trigger-solid" role="tabpanel" data-ownedby="tabs::r68R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="solid"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/solid'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Portal } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'solid-js/web'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Portalled</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> portalled</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{</span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)">}</</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Portal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Portal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r68R0::content-vue" tabindex="0" aria-labelledby="tabs::r68R0::trigger-vue" role="tabpanel" data-ownedby="tabs::r68R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="vue"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-token-function)"> setup</span><span style="color:var(--astro-code-token-function)"> lang</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-string-expression)">"ts"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { ref } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'vue'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/vue'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-constant)"> open</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-token-function)"> ref</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> portalled</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{{ </span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)"> }}</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span></code></pre></astro-slot></div></div></div></astro-island>
<h3 id="adding-an-arrow">Adding an arrow</h3>
<p>To render an arrow within the popover, render the component <code class="code code--size_md code--variant_outline">Popover.Arrow</code> and
<code class="code code--size_md code--variant_outline">Popover.ArrowTip</code> as children of <code class="code code--size_md code--variant_outline">Popover.Positioner</code>.</p>
<astro-island uid="ZD60sH" prefix="r69" component-url="/_astro/code-examples.XbCqsuUr.js" component-export="CodeExamples" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"CodeExamples","value":true}" await-children=""><div data-scope="tabs" data-part="root" id="tabs::r69R0:" data-orientation="horizontal" dir="ltr" react="[object Object]" solid="[object Object]" vue="[object Object]" class="tabs__root tabs__root--size_sm tabs__root--variant_line not-prose"><div data-scope="tabs" data-part="list" id="tabs::r69R0::list" role="tablist" dir="ltr" aria-orientation="horizontal" data-orientation="horizontal" class="bg_bg.muted px_4 pt_3 rounded-t_l3 tabs__list tabs__list--size_sm tabs__list--variant_line"><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="react" aria-selected="true" data-selected="" aria-controls="tabs::r69R0::content-react" data-ownedby="tabs::r69R0::list" id="tabs::r69R0::trigger-react" tabindex="0" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">React</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="solid" aria-selected="false" aria-controls="tabs::r69R0::content-solid" data-ownedby="tabs::r69R0::list" id="tabs::r69R0::trigger-solid" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Solid</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="vue" aria-selected="false" aria-controls="tabs::r69R0::content-vue" data-ownedby="tabs::r69R0::list" id="tabs::r69R0::trigger-vue" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Vue</button><div id="tabs::r69R0::indicator" data-scope="tabs" data-part="indicator" dir="ltr" data-orientation="horizontal" style="--transition-property: left, right, top, bottom, width, height; --left: 16px; --top: 12px; --width: 59px; --height: 36px; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); left: var(--left);" class="tabs__indicator tabs__indicator--size_sm tabs__indicator--variant_line"></div></div><div class="rounded-b_l3 overflow_hidden bg_grayPalette.900"><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r69R0::content-react" aria-labelledby="tabs::r69R0::trigger-react" role="tabpanel" data-ownedby="tabs::r69R0::list" data-selected="" data-orientation="horizontal" data-state="open" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="react"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/react'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Arrow</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Arrow</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.ArrowTip</span><span style="color:var(--astro-code-color-text)"> /></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Arrow</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r69R0::content-solid" tabindex="0" aria-labelledby="tabs::r69R0::trigger-solid" role="tabpanel" data-ownedby="tabs::r69R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="solid"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/solid'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Arrow</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Arrow</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.ArrowTip</span><span style="color:var(--astro-code-color-text)"> /></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Arrow</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r69R0::content-vue" tabindex="0" aria-labelledby="tabs::r69R0::trigger-vue" role="tabpanel" data-ownedby="tabs::r69R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="vue"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-token-function)"> setup</span><span style="color:var(--astro-code-token-function)"> lang</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-string-expression)">"ts"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { ref } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'vue'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/vue'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-constant)"> open</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-token-function)"> ref</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Arrow</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.ArrowTip</span><span style="color:var(--astro-code-color-text)"> /></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Arrow</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span></code></pre></astro-slot></div></div></div></astro-island>
<h3 id="listening-for-open-and-close-events">Listening for open and close events</h3>
<p>When the popover is opened or closed, we invoke the <code class="code code--size_md code--variant_outline">onOpenChange</code> callback.</p>
<astro-island uid="1YJdIQ" prefix="r70" component-url="/_astro/code-examples.XbCqsuUr.js" component-export="CodeExamples" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"CodeExamples","value":true}" await-children=""><div data-scope="tabs" data-part="root" id="tabs::r70R0:" data-orientation="horizontal" dir="ltr" react="[object Object]" solid="[object Object]" vue="[object Object]" class="tabs__root tabs__root--size_sm tabs__root--variant_line not-prose"><div data-scope="tabs" data-part="list" id="tabs::r70R0::list" role="tablist" dir="ltr" aria-orientation="horizontal" data-orientation="horizontal" class="bg_bg.muted px_4 pt_3 rounded-t_l3 tabs__list tabs__list--size_sm tabs__list--variant_line"><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="react" aria-selected="true" data-selected="" aria-controls="tabs::r70R0::content-react" data-ownedby="tabs::r70R0::list" id="tabs::r70R0::trigger-react" tabindex="0" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">React</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="solid" aria-selected="false" aria-controls="tabs::r70R0::content-solid" data-ownedby="tabs::r70R0::list" id="tabs::r70R0::trigger-solid" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Solid</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="vue" aria-selected="false" aria-controls="tabs::r70R0::content-vue" data-ownedby="tabs::r70R0::list" id="tabs::r70R0::trigger-vue" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Vue</button><div id="tabs::r70R0::indicator" data-scope="tabs" data-part="indicator" dir="ltr" data-orientation="horizontal" style="--transition-property: left, right, top, bottom, width, height; --left: 16px; --top: 12px; --width: 59px; --height: 36px; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); left: var(--left);" class="tabs__indicator tabs__indicator--size_sm tabs__indicator--variant_line"></div></div><div class="rounded-b_l3 overflow_hidden bg_grayPalette.900"><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r70R0::content-react" aria-labelledby="tabs::r70R0::trigger-react" role="tabpanel" data-ownedby="tabs::r70R0::list" data-selected="" data-orientation="horizontal" data-state="open" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="react"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/react'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> OnOpenChange</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> {</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)"> return</span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> onOpenChange</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{(open) </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-token-function)"> alert</span><span style="color:var(--astro-code-color-text)">(open </span><span style="color:var(--astro-code-token-keyword)">?</span><span style="color:var(--astro-code-token-string-expression)"> 'opened'</span><span style="color:var(--astro-code-token-keyword)"> :</span><span style="color:var(--astro-code-token-string-expression)"> 'closed'</span><span style="color:var(--astro-code-color-text)">)}></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{</span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)">}</</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> )</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">}</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r70R0::content-solid" tabindex="0" aria-labelledby="tabs::r70R0::trigger-solid" role="tabpanel" data-ownedby="tabs::r70R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="solid"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/solid'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> OnOpenChange</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> {</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)"> return</span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> onOpenChange</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{(open) </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-token-function)"> alert</span><span style="color:var(--astro-code-color-text)">(open </span><span style="color:var(--astro-code-token-keyword)">?</span><span style="color:var(--astro-code-token-string-expression)"> 'opened'</span><span style="color:var(--astro-code-token-keyword)"> :</span><span style="color:var(--astro-code-token-string-expression)"> 'closed'</span><span style="color:var(--astro-code-color-text)">)}></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{</span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)">}</</span><span style="color:var(--astro-code-token-constant)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> )</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">}</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r70R0::content-vue" tabindex="0" aria-labelledby="tabs::r70R0::trigger-vue" role="tabpanel" data-ownedby="tabs::r70R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="vue"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-token-function)"> setup</span><span style="color:var(--astro-code-token-function)"> lang</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-string-expression)">"ts"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { ref } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'vue'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/vue'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-constant)"> open</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-token-function)"> ref</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)"> @</span><span style="color:var(--astro-code-token-function)">open-change</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)">(open) </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-token-constant)"> console</span><span style="color:var(--astro-code-token-function)">.log</span><span style="color:var(--astro-code-color-text)">(open </span><span style="color:var(--astro-code-token-keyword)">?</span><span style="color:var(--astro-code-token-string-expression)"> 'opened'</span><span style="color:var(--astro-code-token-keyword)"> :</span><span style="color:var(--astro-code-token-string-expression)"> 'closed'</span><span style="color:var(--astro-code-color-text)">)</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> Click Me <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">>{{ </span><span style="color:var(--astro-code-token-string-expression)">'>'</span><span style="color:var(--astro-code-color-text)"> }}</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Indicator</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span></code></pre></astro-slot></div></div></div></astro-island>
<h3 id="control-the-open-state">Control the open state</h3>
<p>Use the <code class="code code--size_md code--variant_outline">isOpen</code> prop to control the open state of the popover.</p>
<astro-island uid="1EcFK5" prefix="r71" component-url="/_astro/code-examples.XbCqsuUr.js" component-export="CodeExamples" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"CodeExamples","value":true}" await-children=""><div data-scope="tabs" data-part="root" id="tabs::r71R0:" data-orientation="horizontal" dir="ltr" react="[object Object]" solid="[object Object]" vue="[object Object]" class="tabs__root tabs__root--size_sm tabs__root--variant_line not-prose"><div data-scope="tabs" data-part="list" id="tabs::r71R0::list" role="tablist" dir="ltr" aria-orientation="horizontal" data-orientation="horizontal" class="bg_bg.muted px_4 pt_3 rounded-t_l3 tabs__list tabs__list--size_sm tabs__list--variant_line"><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="react" aria-selected="true" data-selected="" aria-controls="tabs::r71R0::content-react" data-ownedby="tabs::r71R0::list" id="tabs::r71R0::trigger-react" tabindex="0" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">React</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="solid" aria-selected="false" aria-controls="tabs::r71R0::content-solid" data-ownedby="tabs::r71R0::list" id="tabs::r71R0::trigger-solid" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Solid</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="vue" aria-selected="false" aria-controls="tabs::r71R0::content-vue" data-ownedby="tabs::r71R0::list" id="tabs::r71R0::trigger-vue" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Vue</button><div id="tabs::r71R0::indicator" data-scope="tabs" data-part="indicator" dir="ltr" data-orientation="horizontal" style="--transition-property: left, right, top, bottom, width, height; --left: 16px; --top: 12px; --width: 59px; --height: 36px; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); left: var(--left);" class="tabs__indicator tabs__indicator--size_sm tabs__indicator--variant_line"></div></div><div class="rounded-b_l3 overflow_hidden bg_grayPalette.900"><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r71R0::content-react" aria-labelledby="tabs::r71R0::trigger-react" role="tabpanel" data-ownedby="tabs::r71R0::list" data-selected="" data-orientation="horizontal" data-state="open" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="react"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/react'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { useState } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'react'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Controlled</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> {</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)"> const</span><span style="color:var(--astro-code-color-text)"> [</span><span style="color:var(--astro-code-token-constant)">isOpen</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-token-constant)"> setIsOpen</span><span style="color:var(--astro-code-color-text)">] </span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-function)"> useState</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)"> return</span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">button</span><span style="color:var(--astro-code-token-function)"> onClick</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{() </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-token-function)"> setIsOpen</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-keyword)">!</span><span style="color:var(--astro-code-color-text)">isOpen)}>Toggle</</span><span style="color:var(--astro-code-token-string-expression)">button</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> open</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{isOpen}></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Anchor</span><span style="color:var(--astro-code-color-text)">>Anchor</</span><span style="color:var(--astro-code-token-constant)">Popover.Anchor</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> )</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">}</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r71R0::content-solid" tabindex="0" aria-labelledby="tabs::r71R0::trigger-solid" role="tabpanel" data-ownedby="tabs::r71R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="solid"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/solid'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { createSignal } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'solid-js'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Controlled</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> {</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)"> const</span><span style="color:var(--astro-code-color-text)"> [</span><span style="color:var(--astro-code-token-constant)">isOpen</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-token-constant)"> setIsOpen</span><span style="color:var(--astro-code-color-text)">] </span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-function)"> createSignal</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)"> return</span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">button</span><span style="color:var(--astro-code-token-function)"> onClick</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{() </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-token-function)"> setIsOpen</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-keyword)">!</span><span style="color:var(--astro-code-token-function)">isOpen</span><span style="color:var(--astro-code-color-text)">())}>Toggle</</span><span style="color:var(--astro-code-token-string-expression)">button</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> open</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{</span><span style="color:var(--astro-code-token-function)">isOpen</span><span style="color:var(--astro-code-color-text)">()}></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Anchor</span><span style="color:var(--astro-code-color-text)">>Anchor</</span><span style="color:var(--astro-code-token-constant)">Popover.Anchor</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> )</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">}</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r71R0::content-vue" tabindex="0" aria-labelledby="tabs::r71R0::trigger-vue" role="tabpanel" data-ownedby="tabs::r71R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="vue"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-token-function)"> setup</span><span style="color:var(--astro-code-token-function)"> lang</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-string-expression)">"ts"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { ref } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'vue'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/vue'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-constant)"> open</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-token-function)"> ref</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Fragment</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">button</span><span style="color:var(--astro-code-color-text)"> @</span><span style="color:var(--astro-code-token-function)">click</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)">() </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (open </span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-keyword)"> !</span><span style="color:var(--astro-code-color-text)">open)</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)">>toggle</</span><span style="color:var(--astro-code-token-string-expression)">button</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> v-model</span><span style="color:var(--astro-code-color-text)">:</span><span style="color:var(--astro-code-token-function)">open</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)">open</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Anchor</span><span style="color:var(--astro-code-color-text)">>Anchor</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Anchor</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Fragment</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span></code></pre></astro-slot></div></div></div></astro-island>
<h3 id="modifying-the-close-behavior">Modifying the close behavior</h3>
<p>The popover is designed to close on blur and when the <kbd>esc</kbd> key is
pressed.</p>
<p>To prevent it from closing on blur (clicking or focusing outside), pass the
<code class="code code--size_md code--variant_outline">closeOnInteractOutside</code> prop and set it to <code class="code code--size_md code--variant_outline">false</code>.</p>
<p>To prevent it from closing when the <kbd>esc</kbd> key is pressed, pass the
<code class="code code--size_md code--variant_outline">closeOnEsc</code> prop and set it to <code class="code code--size_md code--variant_outline">false</code>.</p>
<astro-island uid="ZEiW0w" prefix="r72" component-url="/_astro/code-examples.XbCqsuUr.js" component-export="CodeExamples" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"CodeExamples","value":true}" await-children=""><div data-scope="tabs" data-part="root" id="tabs::r72R0:" data-orientation="horizontal" dir="ltr" react="[object Object]" solid="[object Object]" vue="[object Object]" class="tabs__root tabs__root--size_sm tabs__root--variant_line not-prose"><div data-scope="tabs" data-part="list" id="tabs::r72R0::list" role="tablist" dir="ltr" aria-orientation="horizontal" data-orientation="horizontal" class="bg_bg.muted px_4 pt_3 rounded-t_l3 tabs__list tabs__list--size_sm tabs__list--variant_line"><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="react" aria-selected="true" data-selected="" aria-controls="tabs::r72R0::content-react" data-ownedby="tabs::r72R0::list" id="tabs::r72R0::trigger-react" tabindex="0" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">React</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="solid" aria-selected="false" aria-controls="tabs::r72R0::content-solid" data-ownedby="tabs::r72R0::list" id="tabs::r72R0::trigger-solid" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Solid</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="vue" aria-selected="false" aria-controls="tabs::r72R0::content-vue" data-ownedby="tabs::r72R0::list" id="tabs::r72R0::trigger-vue" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Vue</button><div id="tabs::r72R0::indicator" data-scope="tabs" data-part="indicator" dir="ltr" data-orientation="horizontal" style="--transition-property: left, right, top, bottom, width, height; --left: 16px; --top: 12px; --width: 59px; --height: 36px; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); left: var(--left);" class="tabs__indicator tabs__indicator--size_sm tabs__indicator--variant_line"></div></div><div class="rounded-b_l3 overflow_hidden bg_grayPalette.900"><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r72R0::content-react" aria-labelledby="tabs::r72R0::trigger-react" role="tabpanel" data-ownedby="tabs::r72R0::list" data-selected="" data-orientation="horizontal" data-state="open" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="react"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/react'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> CloseBehavior</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> closeOnEsc</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">} </span><span style="color:var(--astro-code-token-function)">closeOnInteractOutside</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">}></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r72R0::content-solid" tabindex="0" aria-labelledby="tabs::r72R0::trigger-solid" role="tabpanel" data-ownedby="tabs::r72R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="solid"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/solid'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Portal } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'solid-js/web'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> CloseBehavior</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> closeOnEsc</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">} </span><span style="color:var(--astro-code-token-function)">closeOnInteractOutside</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">}></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Portal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Portal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r72R0::content-vue" tabindex="0" aria-labelledby="tabs::r72R0::trigger-vue" role="tabpanel" data-ownedby="tabs::r72R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="vue"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-token-function)"> setup</span><span style="color:var(--astro-code-token-function)"> lang</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-string-expression)">"ts"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { ref } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'vue'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/vue'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-constant)"> open</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-token-function)"> ref</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)"> :</span><span style="color:var(--astro-code-token-function)">closeOnEsc</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)"> :</span><span style="color:var(--astro-code-token-function)">closeOnInteractOutside</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span></code></pre></astro-slot></div></div></div></astro-island>
<h3 id="changing-the-placement">Changing the placement</h3>
<p>To change the placement of the popover, set the <code class="code code--size_md code--variant_outline">positioning</code> prop.</p>
<astro-island uid="MIYhG" prefix="r73" component-url="/_astro/code-examples.XbCqsuUr.js" component-export="CodeExamples" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"CodeExamples","value":true}" await-children=""><div data-scope="tabs" data-part="root" id="tabs::r73R0:" data-orientation="horizontal" dir="ltr" react="[object Object]" solid="[object Object]" vue="[object Object]" class="tabs__root tabs__root--size_sm tabs__root--variant_line not-prose"><div data-scope="tabs" data-part="list" id="tabs::r73R0::list" role="tablist" dir="ltr" aria-orientation="horizontal" data-orientation="horizontal" class="bg_bg.muted px_4 pt_3 rounded-t_l3 tabs__list tabs__list--size_sm tabs__list--variant_line"><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="react" aria-selected="true" data-selected="" aria-controls="tabs::r73R0::content-react" data-ownedby="tabs::r73R0::list" id="tabs::r73R0::trigger-react" tabindex="0" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">React</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="solid" aria-selected="false" aria-controls="tabs::r73R0::content-solid" data-ownedby="tabs::r73R0::list" id="tabs::r73R0::trigger-solid" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Solid</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="vue" aria-selected="false" aria-controls="tabs::r73R0::content-vue" data-ownedby="tabs::r73R0::list" id="tabs::r73R0::trigger-vue" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Vue</button><div id="tabs::r73R0::indicator" data-scope="tabs" data-part="indicator" dir="ltr" data-orientation="horizontal" style="--transition-property: left, right, top, bottom, width, height; --left: 16px; --top: 12px; --width: 59px; --height: 36px; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); left: var(--left);" class="tabs__indicator tabs__indicator--size_sm tabs__indicator--variant_line"></div></div><div class="rounded-b_l3 overflow_hidden bg_grayPalette.900"><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r73R0::content-react" aria-labelledby="tabs::r73R0::trigger-react" role="tabpanel" data-ownedby="tabs::r73R0::list" data-selected="" data-orientation="horizontal" data-state="open" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="react"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/react'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Positioning</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span></span>
<span class="line"><span style="color:var(--astro-code-token-function)"> positioning</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{{ placement</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-string-expression)"> 'left-start'</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-color-text)"> gutter</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-constant)"> 16</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-color-text)"> offset</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-color-text)"> { mainAxis</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-constant)"> 12</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-color-text)"> crossAxis</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-constant)"> 12</span><span style="color:var(--astro-code-color-text)"> } }}</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> ></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r73R0::content-solid" tabindex="0" aria-labelledby="tabs::r73R0::trigger-solid" role="tabpanel" data-ownedby="tabs::r73R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="solid"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/solid'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Positioning</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span></span>
<span class="line"><span style="color:var(--astro-code-token-function)"> positioning</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">{{ placement</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-string-expression)"> 'left-start'</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-color-text)"> gutter</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-constant)"> 16</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-color-text)"> offset</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-color-text)"> { mainAxis</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-constant)"> 12</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-color-text)"> crossAxis</span><span style="color:var(--astro-code-token-keyword)">:</span><span style="color:var(--astro-code-token-constant)"> 12</span><span style="color:var(--astro-code-color-text)"> } }}</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> ></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r73R0::content-vue" tabindex="0" aria-labelledby="tabs::r73R0::trigger-vue" role="tabpanel" data-ownedby="tabs::r73R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="vue"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-token-function)"> setup</span><span style="color:var(--astro-code-token-function)"> lang</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-string-expression)">"ts"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { ref } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'vue'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/vue'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-constant)"> open</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-token-function)"> ref</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> :</span><span style="color:var(--astro-code-token-function)">positioning</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-color-text)">"</span><span style="color:var(--astro-code-color-text)">{</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> placement</span><span style="color:var(--astro-code-token-punctuation)">:</span><span style="color:var(--astro-code-token-string-expression)"> 'left-start'</span><span style="color:var(--astro-code-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> gutter</span><span style="color:var(--astro-code-token-punctuation)">:</span><span style="color:var(--astro-code-token-constant)"> 16</span><span style="color:var(--astro-code-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> offset</span><span style="color:var(--astro-code-token-punctuation)">:</span><span style="color:var(--astro-code-color-text)"> { mainAxis</span><span style="color:var(--astro-code-token-punctuation)">:</span><span style="color:var(--astro-code-token-constant)"> 12</span><span style="color:var(--astro-code-token-punctuation)">,</span><span style="color:var(--astro-code-color-text)"> crossAxis</span><span style="color:var(--astro-code-token-punctuation)">:</span><span style="color:var(--astro-code-token-constant)"> 12</span><span style="color:var(--astro-code-color-text)"> }</span><span style="color:var(--astro-code-token-punctuation)">,</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> }</span><span style="color:var(--astro-code-color-text)">"</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> ></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span></code></pre></astro-slot></div></div></div></astro-island>
<h3 id="changing-the-modality">Changing the modality</h3>
<p>In some cases, you might want the popover to be modal. This means that it’ll:</p>
<ul>
<li>trap focus within its content</li>
<li>block scrolling on the body</li>
<li>disable pointer interactions outside the popover</li>
<li>hide content behind the popover from screen readers</li>
</ul>
<p>To make the popover modal, set the <code class="code code--size_md code--variant_outline">modal</code> prop to <code class="code code--size_md code--variant_outline">true</code>. When <code class="code code--size_md code--variant_outline">modal={true}</code>,
we set the <code class="code code--size_md code--variant_outline">portalled</code> attribute to <code class="code code--size_md code--variant_outline">true</code> as well.</p>
<astro-island uid="ZwTTlt" prefix="r74" component-url="/_astro/code-examples.XbCqsuUr.js" component-export="CodeExamples" renderer-url="/_astro/client.6N_nQQgG.js" props="{}" client="load" opts="{"name":"CodeExamples","value":true}" await-children=""><div data-scope="tabs" data-part="root" id="tabs::r74R0:" data-orientation="horizontal" dir="ltr" react="[object Object]" solid="[object Object]" vue="[object Object]" class="tabs__root tabs__root--size_sm tabs__root--variant_line not-prose"><div data-scope="tabs" data-part="list" id="tabs::r74R0::list" role="tablist" dir="ltr" aria-orientation="horizontal" data-orientation="horizontal" class="bg_bg.muted px_4 pt_3 rounded-t_l3 tabs__list tabs__list--size_sm tabs__list--variant_line"><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="react" aria-selected="true" data-selected="" aria-controls="tabs::r74R0::content-react" data-ownedby="tabs::r74R0::list" id="tabs::r74R0::trigger-react" tabindex="0" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">React</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="solid" aria-selected="false" aria-controls="tabs::r74R0::content-solid" data-ownedby="tabs::r74R0::list" id="tabs::r74R0::trigger-solid" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Solid</button><button data-scope="tabs" data-part="trigger" role="tab" type="button" dir="ltr" data-orientation="horizontal" aria-disabled="false" data-value="vue" aria-selected="false" aria-controls="tabs::r74R0::content-vue" data-ownedby="tabs::r74R0::list" id="tabs::r74R0::trigger-vue" tabindex="-1" class="tabs__trigger tabs__trigger--size_sm tabs__trigger--variant_line fs_sm h_9 min-w_9 px_2.5">Vue</button><div id="tabs::r74R0::indicator" data-scope="tabs" data-part="indicator" dir="ltr" data-orientation="horizontal" style="--transition-property: left, right, top, bottom, width, height; --left: 16px; --top: 12px; --width: 59px; --height: 36px; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); left: var(--left);" class="tabs__indicator tabs__indicator--size_sm tabs__indicator--variant_line"></div></div><div class="rounded-b_l3 overflow_hidden bg_grayPalette.900"><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r74R0::content-react" aria-labelledby="tabs::r74R0::trigger-react" role="tabpanel" data-ownedby="tabs::r74R0::list" data-selected="" data-orientation="horizontal" data-state="open" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="react"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/react'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Modal</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> modal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r74R0::content-solid" tabindex="0" aria-labelledby="tabs::r74R0::trigger-solid" role="tabpanel" data-ownedby="tabs::r74R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="solid"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/solid'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-function)"> Modal</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-color-text)"> () </span><span style="color:var(--astro-code-token-keyword)">=></span><span style="color:var(--astro-code-color-text)"> (</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> modal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-constant)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-constant)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-constant)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-constant)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-constant)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"></span></code></pre></astro-slot></div><div data-scope="tabs" data-part="content" dir="ltr" id="tabs::r74R0::content-vue" tabindex="0" aria-labelledby="tabs::r74R0::trigger-vue" role="tabpanel" data-ownedby="tabs::r74R0::list" data-orientation="horizontal" hidden="" data-state="closed" class="p_4 tabs__content tabs__content--size_sm tabs__content--variant_line pt_3"><astro-slot name="vue"><pre class="astro-code css-variables" style="background-color:var(--astro-code-color-background);color:var(--astro-code-color-text); overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-token-function)"> setup</span><span style="color:var(--astro-code-token-function)"> lang</span><span style="color:var(--astro-code-token-keyword)">=</span><span style="color:var(--astro-code-token-string-expression)">"ts"</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { ref } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> 'vue'</span></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">import</span><span style="color:var(--astro-code-color-text)"> { Popover } </span><span style="color:var(--astro-code-token-keyword)">from</span><span style="color:var(--astro-code-token-string-expression)"> '@ark-ui/vue'</span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-token-keyword)">const</span><span style="color:var(--astro-code-token-constant)"> open</span><span style="color:var(--astro-code-token-keyword)"> =</span><span style="color:var(--astro-code-token-function)"> ref</span><span style="color:var(--astro-code-color-text)">(</span><span style="color:var(--astro-code-token-constant)">false</span><span style="color:var(--astro-code-color-text)">)</span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">script</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span>
<span class="line"><span style="color:var(--astro-code-color-text)"><</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-token-function)"> modal</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">>Click Me</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Trigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">>Title</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Title</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">>Description</</span><span style="color:var(--astro-code-token-string-expression)">Popover.Description</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> <</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">>Close</</span><span style="color:var(--astro-code-token-string-expression)">Popover.CloseTrigger</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Content</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Positioner</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"> </</span><span style="color:var(--astro-code-token-string-expression)">Popover.Root</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"><span style="color:var(--astro-code-color-text)"></</span><span style="color:var(--astro-code-token-string-expression)">template</span><span style="color:var(--astro-code-color-text)">></span></span>
<span class="line"></span></code></pre></astro-slot></div></div></div></astro-island>
<h2 id="api-reference">API Reference</h2>
<astro-island uid="Z1JPonF" prefix="r65" component-url="/_astro/component-props-table.3qyBIT6a.js" component-export="ComponentPropsTable" renderer-url="/_astro/client.6N_nQQgG.js" props="{"types":[0,{"id":[0,"react/popover.types"],"collection":[0,"types"],"data":[0,{"Root":[0,{"autoFocus":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Whether to automatically set focus on the first focusable\ncontent within the popover when opened."]}],"closeOnEsc":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Whether to close the popover when the escape key is pressed."]}],"closeOnInteractOutside":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Whether to close the popover when the user clicks outside of the popover."]}],"defaultOpen":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"The initial open state of the popover."]}],"dir":[0,{"type":[0,"'ltr' | 'rtl'"],"isRequired":[0,false],"defaultValue":[0,"\"ltr\""],"description":[0,"The document's text/writing direction."]}],"getRootNode":[0,{"type":[0,"() => Node | ShadowRoot | Document"],"isRequired":[0,false],"description":[0,"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."]}],"id":[0,{"type":[0,"string"],"isRequired":[0,false],"description":[0,"The unique identifier of the machine."]}],"ids":[0,{"type":[0,"Partial<{\n anchor: string\n trigger: string\n content: string\n title: string\n description: string\n closeTrigger: string\n positioner: string\n arrow: string\n}>"],"isRequired":[0,false],"description":[0,"The ids of the elements in the popover. Useful for composition."]}],"initialFocusEl":[0,{"type":[0,"HTMLElement | (() => MaybeElement)"],"isRequired":[0,false],"description":[0,"The element to focus on when the popover is opened."]}],"lazyMount":[0,{"type":[0,"boolean"],"isRequired":[0,false],"defaultValue":[0,"false"],"description":[0,"Whether to enable lazy mounting"]}],"modal":[0,{"type":[0,"boolean"],"isRequired":[0,false],"defaultValue":[0,"false"],"description":[0,"Whether the popover should be modal. When set to `true`:\n- interaction with outside elements will be disabled\n- only popover content will be visible to screen readers\n- scrolling is blocked\n- focus is trapped within the popover"]}],"onEscapeKeyDown":[0,{"type":[0,"(event: KeyboardEvent) => void"],"isRequired":[0,false],"description":[0,"Function called when the escape key is pressed"]}],"onExitComplete":[0,{"type":[0,"() => void"],"isRequired":[0,false],"description":[0,"Function called when the animation ends in the closed state."]}],"onFocusOutside":[0,{"type":[0,"(event: FocusOutsideEvent) => void"],"isRequired":[0,false],"description":[0,"Function called when the focus is moved outside the component"]}],"onInteractOutside":[0,{"type":[0,"(event: InteractOutsideEvent) => void"],"isRequired":[0,false],"description":[0,"Function called when an interaction happens outside the component"]}],"onOpenChange":[0,{"type":[0,"(details: OpenChangeDetails) => void"],"isRequired":[0,false],"description":[0,"Function invoked when the popover opens or closes"]}],"onPointerDownOutside":[0,{"type":[0,"(event: PointerDownOutsideEvent) => void"],"isRequired":[0,false],"description":[0,"Function called when the pointer is pressed down outside the component"]}],"open":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Whether the popover is open"]}],"portalled":[0,{"type":[0,"boolean"],"isRequired":[0,false],"defaultValue":[0,"true"],"description":[0,"Whether the popover is rendered in a portal"]}],"positioning":[0,{"type":[0,"PositioningOptions"],"isRequired":[0,false],"description":[0,"The user provided options used to position the popover content"]}],"present":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Whether the node is present (controlled by the user)"]}],"unmountOnExit":[0,{"type":[0,"boolean"],"isRequired":[0,false],"defaultValue":[0,"false"],"description":[0,"Whether to unmount on exit."]}]}],"Arrow":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"Title":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"Anchor":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"Content":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"Trigger":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"ArrowTip":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"Indicator":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"Positioner":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"Description":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}],"CloseTrigger":[0,{"asChild":[0,{"type":[0,"boolean"],"isRequired":[0,false],"description":[0,"Render as a different element type."]}]}]}]}]}" client="load" opts="{"name":"ComponentPropsTable","value":true}" await-children=""><div class="d_flex flex_column gap_6 not-prose"><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Root</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">autoFocus</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r0::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r0::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">closeOnEsc</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r1::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r1::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">closeOnInteractOutside</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r2::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r2::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">defaultOpen</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r3::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r3::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">dir</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r4::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r4::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">'ltr' | 'rtl'</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">"ltr"</code></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">getRootNode</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r5::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r5::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">() => Node | ShadowRoot | Document</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">id</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r6::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r6::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">string</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">ids</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r7::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r7::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">Partial<{
anchor: string
trigger: string
content: string
title: string
description: string
closeTrigger: string
positioner: string
arrow: string
}></code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">initialFocusEl</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r8::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r8::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">HTMLElement | (() => MaybeElement)</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">lazyMount</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65r9::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65r9::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">false</code></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">modal</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65ra::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65ra::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">false</code></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">onEscapeKeyDown</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rb::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rb::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">(event: KeyboardEvent) => void</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">onExitComplete</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rc::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rc::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">() => void</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">onFocusOutside</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rd::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rd::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">(event: FocusOutsideEvent) => void</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">onInteractOutside</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65re::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65re::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">(event: InteractOutsideEvent) => void</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">onOpenChange</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rf::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rf::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">(details: OpenChangeDetails) => void</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">onPointerDownOutside</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rg::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rg::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">(event: PointerDownOutsideEvent) => void</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">open</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rh::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rh::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">portalled</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65ri::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65ri::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">true</code></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">positioning</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rj::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rj::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">PositioningOptions</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">present</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rk::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rk::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">unmountOnExit</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rl::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rl::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">false</code></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Arrow</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rm::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rm::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Title</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rn::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rn::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Anchor</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65ro::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65ro::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Content</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rp::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rp::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Trigger</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rq::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rq::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">ArrowTip</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rr::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rr::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Indicator</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rs::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rs::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Positioner</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rt::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rt::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">Description</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65ru::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65ru::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div><div class="d_flex flex_column gap_4 not-prose"><h2 class="text textStyle_xl font_semibold">CloseTrigger</h2><div class="d_flex flex_column gap_10px overflow-x_auto"><table class="table__root table__root--size_sm table__root--variant_outline"><th class="table__header table__header--size_sm table__header--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><thead class="table__head table__head--size_sm table__head--variant_outline">Prop</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Type</thead><thead class="table__head table__head--size_sm table__head--variant_outline">Default</thead></tr></th><tbody class="table__body table__body--size_sm table__body--variant_outline"><tr class="table__row table__row--size_sm table__row--variant_outline"><td class="w_40 table__cell table__cell--size_sm table__cell--variant_outline"><div class="d_flex items_center gap_10px flex_row"><code class="code code--size_sm code--variant_outline text_accent.default">asChild</code><button data-scope="popover" data-part="trigger" type="button" id="popover::r65rv::trigger" aria-haspopup="dialog" aria-expanded="false" data-state="closed" aria-controls="popover::r65rv::content" class="button button--variant_link button--size_xs px_0 text_fg.subtle popover__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle "><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg></button></div></td><td class="h_auto table__cell table__cell--size_sm table__cell--variant_outline"><code class="code code--size_sm code--variant_outline">boolean</code></td><td class="w_12 text_center table__cell table__cell--size_sm table__cell--variant_outline"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus icon icon--size_xs text_fg.muted"><path d="M5 12h14"></path></svg></td></tr></tbody></table></div></div></div></astro-island> </article> <div class="d_flex flex_column gap_6"> <div class="d_flex items_center justify_space-between gap_10px flex_row"><div class="d_flex flex_column gap_3"> <p class="text text_fg.subtle font_semibold textStyle_sm">
Previous
</p> <a href="https://ark-ui.com/docs/components/pin-input" class="button button--variant_link button--size_lg"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left "><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg> Pin Input </a> </div><div style="margin-left:auto" class="d_flex flex_column gap_3"> <p class="text text_fg.subtle font_semibold textStyle_sm">
Next
</p> <a href="https://ark-ui.com/docs/components/presence" class="button button--variant_link button--size_lg"> Presence <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right "><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> </a> </div></div> </div> </div> </div> <div class="d_none lg:d_block flex_0_0_240px"> <div class="pos_sticky top_28 right_0 ps_8"> <astro-island uid="1FPD6K" prefix="r11" component-url="/_astro/table-of-content.kfoXf9mF.js" component-export="TableOfContent" renderer-url="/_astro/client.6N_nQQgG.js" props="{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"anatomy"],"text":[0,"Anatomy"]}],[0,{"depth":[0,2],"slug":[0,"examples"],"text":[0,"Examples"]}],[0,{"depth":[0,3],"slug":[0,"using-a-portal"],"text":[0,"Using a Portal"]}],[0,{"depth":[0,3],"slug":[0,"adding-an-arrow"],"text":[0,"Adding an arrow"]}],[0,{"depth":[0,3],"slug":[0,"listening-for-open-and-close-events"],"text":[0,"Listening for open and close events"]}],[0,{"depth":[0,3],"slug":[0,"control-the-open-state"],"text":[0,"Control the open state"]}],[0,{"depth":[0,3],"slug":[0,"modifying-the-close-behavior"],"text":[0,"Modifying the close behavior"]}],[0,{"depth":[0,3],"slug":[0,"changing-the-placement"],"text":[0,"Changing the placement"]}],[0,{"depth":[0,3],"slug":[0,"changing-the-modality"],"text":[0,"Changing the modality"]}],[0,{"depth":[0,2],"slug":[0,"api-reference"],"text":[0,"API Reference"]}]]]}" client="load" opts="{"name":"TableOfContent","value":true}" await-children=""><div class="d_flex flex_column gap_3"><p class="text textStyle_md md:textStyle_sm font_semibold">On this page</p><div class="d_flex flex_column gap_10px"><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r11R2:" aria-labelledby="radio-group::r11R2::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/components/popover#anatomy" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r11R2::radio:#anatomy" for="radio-group::r11R2::radio:input:#anatomy" data-state="checked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r11R2::radio:control:#anatomy" aria-hidden="true" data-state="checked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r11R2:" id="radio-group::r11R2::radio:input:#anatomy" type="radio" name=":r11R2:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="#anatomy" checked=""><span data-scope="segment-group" data-part="item-text" id="radio-group::r11R2::radio:label:#anatomy" data-state="checked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Anatomy</div></span></label></a><a href="https://ark-ui.com/docs/components/popover#examples" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r11R2::radio:#examples" for="radio-group::r11R2::radio:input:#examples" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r11R2::radio:control:#examples" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r11R2:" id="radio-group::r11R2::radio:input:#examples" type="radio" name=":r11R2:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="#examples"><span data-scope="segment-group" data-part="item-text" id="radio-group::r11R2::radio:label:#examples" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Examples</div></span></label></a><a href="https://ark-ui.com/docs/components/popover#api-reference" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r11R2::radio:#api-reference" for="radio-group::r11R2::radio:input:#api-reference" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r11R2::radio:control:#api-reference" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r11R2:" id="radio-group::r11R2::radio:input:#api-reference" type="radio" name=":r11R2:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="#api-reference"><span data-scope="segment-group" data-part="item-text" id="radio-group::r11R2::radio:label:#api-reference" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">API Reference</div></span></label></a><div id="radio-group::r11R2::indicator" data-scope="segment-group" data-part="indicator" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); top: var(--top); --left: 0px; --top: 0px; --width: 84px; --height: 32px;" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div></div></div></astro-island> </div> </div> </div> </main> <script data-astro-exec="">
const setColorMode = () => {
const colorMode = (() => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('ark-ui-color-mode')) {
return localStorage.getItem('ark-ui-color-mode')
}
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark'
}
return 'light'
})()
if (colorMode === 'dark') {
document.documentElement.classList.add('dark')
}
window.localStorage.setItem('ark-ui-color-mode', colorMode)
}
setColorMode()
document.addEventListener('astro:after-swap', setColorMode)
</script> <div id="popover::r65r0::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r0::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r0::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r0::desc" class="popover__description">Whether to automatically set focus on the first focusable
content within the popover when opened.</p></div></div><div id="popover::r65r1::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r1::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r1::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r1::desc" class="popover__description">Whether to close the popover when the escape key is pressed.</p></div></div><div id="popover::r65r2::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r2::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r2::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r2::desc" class="popover__description">Whether to close the popover when the user clicks outside of the popover.</p></div></div><div id="popover::r65r3::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r3::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r3::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r3::desc" class="popover__description">The initial open state of the popover.</p></div></div><div id="popover::r65r4::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r4::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r4::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r4::desc" class="popover__description">The document's text/writing direction.</p></div></div><div id="popover::r65r5::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r5::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r5::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r5::desc" class="popover__description">A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.</p></div></div><div id="popover::r65r6::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r6::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r6::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r6::desc" class="popover__description">The unique identifier of the machine.</p></div></div><div id="popover::r65r7::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r7::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r7::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r7::desc" class="popover__description">The ids of the elements in the popover. Useful for composition.</p></div></div><div id="popover::r65r8::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r8::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r8::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r8::desc" class="popover__description">The element to focus on when the popover is opened.</p></div></div><div id="popover::r65r9::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65r9::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65r9::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65r9::desc" class="popover__description">Whether to enable lazy mounting</p></div></div><div id="popover::r65ra::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65ra::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65ra::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65ra::desc" class="popover__description">Whether the popover should be modal. When set to `true`:
- interaction with outside elements will be disabled
- only popover content will be visible to screen readers
- scrolling is blocked
- focus is trapped within the popover</p></div></div><div id="popover::r65rb::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rb::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rb::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rb::desc" class="popover__description">Function called when the escape key is pressed</p></div></div><div id="popover::r65rc::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rc::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rc::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rc::desc" class="popover__description">Function called when the animation ends in the closed state.</p></div></div><div id="popover::r65rd::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rd::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rd::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rd::desc" class="popover__description">Function called when the focus is moved outside the component</p></div></div><div id="popover::r65re::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65re::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65re::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65re::desc" class="popover__description">Function called when an interaction happens outside the component</p></div></div><div id="popover::r65rf::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rf::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rf::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rf::desc" class="popover__description">Function invoked when the popover opens or closes</p></div></div><div id="popover::r65rg::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rg::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rg::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rg::desc" class="popover__description">Function called when the pointer is pressed down outside the component</p></div></div><div id="popover::r65rh::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rh::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rh::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rh::desc" class="popover__description">Whether the popover is open</p></div></div><div id="popover::r65ri::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65ri::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65ri::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65ri::desc" class="popover__description">Whether the popover is rendered in a portal</p></div></div><div id="popover::r65rj::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rj::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rj::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rj::desc" class="popover__description">The user provided options used to position the popover content</p></div></div><div id="popover::r65rk::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rk::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rk::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rk::desc" class="popover__description">Whether the node is present (controlled by the user)</p></div></div><div id="popover::r65rl::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rl::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rl::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rl::desc" class="popover__description">Whether to unmount on exit.</p></div></div><div id="popover::r65rm::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rm::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rm::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rm::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65rn::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rn::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rn::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rn::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65ro::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65ro::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65ro::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65ro::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65rp::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rp::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rp::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rp::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65rq::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rq::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rq::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rq::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65rr::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rr::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rr::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rr::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65rs::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rs::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rs::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rs::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65rt::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rt::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rt::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rt::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65ru::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65ru::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65ru::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65ru::desc" class="popover__description">Render as a different element type.</p></div></div><div id="popover::r65rv::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r65rv::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-describedby="popover::r65rv::desc" class="popover__content"><p data-scope="popover" data-part="description" id="popover::r65rv::desc" class="popover__description">Render as a different element type.</p></div></div><div data-scope="dialog" data-part="backdrop" hidden="" id="dialog::r104R0::backdrop" data-state="closed" class="drawer__backdrop drawer__backdrop--variant_left"></div><div data-scope="dialog" data-part="positioner" id="dialog::r104R0::positioner" class="drawer__positioner drawer__positioner--variant_left" style="pointer-events: none;"><div data-scope="dialog" data-part="content" role="dialog" hidden="" id="dialog::r104R0::content" tabindex="-1" data-state="closed" aria-modal="true" aria-labelledby="dialog::r104R0::title" aria-describedby="dialog::r104R0::description" class="drawer__content drawer__content--variant_left"><div class="pt_5 drawer__header drawer__header--variant_left"><a href="https://ark-ui.com/" aria-label="Go to start page"><svg height="28" viewBox="0 0 63 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_901_179)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.07455 11.5775C9.21266 11.1733 9.35082 10.7689 9.48904 10.3643C9.64944 9.8968 9.80558 9.44041 9.96157 8.98444L9.97953 8.93194C10.0327 8.77661 10.0858 8.62127 10.1388 8.46593C10.3495 7.84944 10.5601 7.23296 10.7744 6.6177C10.7763 6.61225 10.7782 6.60648 10.7802 6.60048C10.8003 6.54059 10.8278 6.45874 10.8969 6.45874C10.9642 6.45874 10.9919 6.53319 11.0132 6.59071C11.016 6.59812 11.0186 6.60525 11.0212 6.6119C11.084 6.77175 11.1405 6.93408 11.197 7.09641C11.2174 7.15501 11.2378 7.2136 11.2585 7.27208C11.418 7.72322 11.5776 8.17435 11.7372 8.62548C12.2869 10.1792 12.8365 11.7329 13.3858 13.2867C13.511 13.641 13.4621 13.707 13.0802 13.707C12.8417 13.707 12.6032 13.707 12.3647 13.707C11.3032 13.707 10.2418 13.707 9.18038 13.7077C9.13956 13.7078 9.09874 13.7121 9.05372 13.717C9.03136 13.7194 9.00796 13.7219 8.98301 13.7241L12.6148 24L12.6531 23.9938V19.5735H21.8947C21.887 19.5488 21.8805 19.5271 21.8745 19.5073C21.8632 19.4702 21.8541 19.4401 21.8437 19.4104C21.5622 18.6035 21.2807 17.7967 20.9991 16.9898C19.5087 12.7185 18.0183 8.44713 16.5307 4.17479C16.4829 4.0375 16.4169 3.99982 16.274 4C13.2227 4.00385 10.1713 4.00375 7.11986 4.00364C6.5828 4.00362 6.04573 4.0036 5.50866 4.00361L5.30127 4.00361L0 19.716L0.215452 19.716C0.631264 19.716 1.04708 19.7159 1.46289 19.7158C2.99697 19.7153 4.53106 19.7149 6.06512 19.7204C6.24167 19.7211 6.31584 19.6699 6.3727 19.5023C7.26885 16.8622 8.17034 14.2238 9.07455 11.5775ZM33.914 4C35.7783 4 37.5489 4.26803 38.8634 5.01851C40.2032 5.78342 41.0475 7.03904 41.0475 8.926C41.0475 10.1194 40.5583 11.1908 39.6868 11.9351C39.3349 12.2356 39.3611 12.9687 39.7035 13.28C39.7574 13.329 39.8092 13.3801 39.8587 13.4334C40.3694 13.9826 40.6094 14.7223 40.6094 15.6382V17.4035C40.6094 18.0283 40.614 18.5945 40.8783 19.1377C40.9775 19.3416 40.829 19.579 40.6023 19.579H35.2961C35.1816 19.579 35.0765 19.5156 35.023 19.4144C34.8005 18.9935 34.7109 18.3312 34.7109 17.4446V16.2746C34.7109 15.7898 34.6036 15.4616 34.3689 15.2452C34.1275 15.0226 33.6866 14.8578 32.8765 14.8578H29.7671C29.491 14.8578 29.2671 15.0817 29.2671 15.3578V19.079C29.2671 19.3551 29.0432 19.579 28.7671 19.579H23.8685C23.5924 19.579 23.3685 19.3551 23.3685 19.079V4.5C23.3685 4.22386 23.5924 4 23.8685 4H33.914ZM32.8304 10.9175C33.8079 10.9175 34.3605 10.7402 34.6671 10.4935C34.957 10.2602 35.0797 9.92042 35.0797 9.43917C35.0797 9.16287 35.0237 8.95713 34.9342 8.80069C34.8454 8.64532 34.7132 8.52021 34.5309 8.42032C34.1532 8.2134 33.5802 8.12503 32.8304 8.12503H29.7671C29.491 8.12503 29.2671 8.34889 29.2671 8.62503V10.4175C29.2671 10.6937 29.491 10.9175 29.7671 10.9175H32.8304ZM55.0708 4.13937C55.1639 4.04994 55.288 4 55.4171 4H61.6326C62.0938 4 62.3091 4.57119 61.9627 4.8756L55.9164 10.1885C55.7103 10.3697 55.6886 10.6831 55.868 10.8909L62.6548 18.7522C62.9345 19.0762 62.7043 19.579 62.2763 19.579H56.1211C55.9729 19.579 55.8323 19.5132 55.7373 19.3995L51.6631 14.5209C51.4793 14.3007 51.1483 14.2801 50.9385 14.4756L49.3549 15.9515C49.2534 16.0461 49.1958 16.1785 49.1958 16.3173V19.079C49.1958 19.3551 48.9719 19.579 48.6958 19.579H43.7972C43.5211 19.579 43.2972 19.3551 43.2972 19.079V4.5C43.2972 4.22386 43.5211 4 43.7972 4H48.6958C48.9719 4 49.1958 4.22386 49.1958 4.5V8.60801C49.1958 9.0486 49.7243 9.27382 50.0421 8.96863L55.0708 4.13937Z" fill="#EB5E41"></path></g><defs><clippath id="clip0_901_179"><rect width="62.7773" height="24" fill="white"></rect></clippath></defs></svg></a><button aria-label="Close Sidebar" data-scope="dialog" data-part="close-trigger" id="dialog::r104R0::close" type="button" class="iconButton iconButton--variant_ghost iconButton--size_md top_3 right_4 pos_absolute drawer__closeTrigger drawer__closeTrigger--variant_left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x "><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div><div class="drawer__body drawer__body--variant_left"><astro-slot> <div class="d_flex flex_column gap_8"> <div class="d_flex flex_column gap_4"><a href="https://ark-ui.com/" target="_blank" aria-current="page" class="link font_medium textStyle_sm w_fit-content text_fg.muted currentPage:text_accent.default currentPage:hover:text_accent.default text-decor_none hover:text_fg.muted"> <div class="d_flex items_center justify_center bg_bg.subtle border-w_1px rounded_l2 w_6 h_6"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open "><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg></div> Documentation</a><a href="https://discord.gg/ww6HE5xaZ2" target="_blank" aria-current="false" class="link font_medium textStyle_sm w_fit-content text_fg.muted currentPage:text_accent.default currentPage:hover:text_accent.default text-decor_none hover:text_fg.muted"> <div class="d_flex items_center justify_center bg_bg.subtle border-w_1px rounded_l2 w_6 h_6"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle "><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></div> Discord</a><a href="https://github.com/chakra-ui/ark/" target="_blank" aria-current="false" class="link font_medium textStyle_sm w_fit-content text_fg.muted currentPage:text_accent.default currentPage:hover:text_accent.default text-decor_none hover:text_fg.muted"> <div class="d_flex items_center justify_center bg_bg.subtle border-w_1px rounded_l2 w_6 h_6"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github "><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></div> GitHub</a><a href="https://ark-ui.canny.io/" target="_blank" aria-current="false" class="link font_medium textStyle_sm w_fit-content text_fg.muted currentPage:text_accent.default currentPage:hover:text_accent.default text-decor_none hover:text_fg.muted"> <div class="d_flex items_center justify_center bg_bg.subtle border-w_1px rounded_l2 w_6 h_6"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map "><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"></polygon><line x1="9" x2="9" y1="3" y2="18"></line><line x1="15" x2="15" y1="6" y2="21"></line></svg></div> Roadmap</a></div> <div class="d_flex flex_column gap_3"> <p class="text textStyle_md md:textStyle_sm font_semibold text_capitalize">Overview</p> <astro-island uid="Zk5hys" prefix="r13" component-url="/_astro/sidebar-group.pYL0hH5E.js" component-export="SidebarGroup" renderer-url="/_astro/client.6N_nQQgG.js" props="{"items":[1,[[0,{"title":[0,"Introduction"],"href":[0,"/docs/overview/introduction"]}],[0,{"title":[0,"Getting Started"],"href":[0,"/docs/overview/getting-started"]}],[0,{"title":[0,"The asChild Prop"],"href":[0,"/docs/overview/as-child-prop"]}],[0,{"title":[0,"Animation"],"href":[0,"/docs/overview/animation"]}]]],"data-astro-transition-persist":[0,"astro-pbta5uz2-1"]}" client="load" opts="{"name":"SidebarGroup","value":true}" data-astro-transition-persist="astro-pbta5uz2-1" await-children=""><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r13R0:" aria-labelledby="radio-group::r13R0::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/overview/introduction" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r13R0::radio:/docs/overview/introduction" for="radio-group::r13R0::radio:input:/docs/overview/introduction" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r13R0::radio:control:/docs/overview/introduction" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r13R0:" id="radio-group::r13R0::radio:input:/docs/overview/introduction" type="radio" name=":r13R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/overview/introduction"><span data-scope="segment-group" data-part="item-text" id="radio-group::r13R0::radio:label:/docs/overview/introduction" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Introduction</div></span></label></a><a href="https://ark-ui.com/docs/overview/getting-started" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r13R0::radio:/docs/overview/getting-started" for="radio-group::r13R0::radio:input:/docs/overview/getting-started" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r13R0::radio:control:/docs/overview/getting-started" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r13R0:" id="radio-group::r13R0::radio:input:/docs/overview/getting-started" type="radio" name=":r13R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/overview/getting-started"><span data-scope="segment-group" data-part="item-text" id="radio-group::r13R0::radio:label:/docs/overview/getting-started" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Getting Started</div></span></label></a><a href="https://ark-ui.com/docs/overview/as-child-prop" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r13R0::radio:/docs/overview/as-child-prop" for="radio-group::r13R0::radio:input:/docs/overview/as-child-prop" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r13R0::radio:control:/docs/overview/as-child-prop" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r13R0:" id="radio-group::r13R0::radio:input:/docs/overview/as-child-prop" type="radio" name=":r13R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/overview/as-child-prop"><span data-scope="segment-group" data-part="item-text" id="radio-group::r13R0::radio:label:/docs/overview/as-child-prop" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">The asChild Prop</div></span></label></a><a href="https://ark-ui.com/docs/overview/animation" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r13R0::radio:/docs/overview/animation" for="radio-group::r13R0::radio:input:/docs/overview/animation" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r13R0::radio:control:/docs/overview/animation" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r13R0:" id="radio-group::r13R0::radio:input:/docs/overview/animation" type="radio" name=":r13R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/overview/animation"><span data-scope="segment-group" data-part="item-text" id="radio-group::r13R0::radio:label:/docs/overview/animation" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Animation</div></span></label></a><div id="radio-group::r13R0::indicator" data-scope="segment-group" data-part="indicator" hidden="" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: var(--transition-duration, 150ms); transition-timing-function: var(--transition-timing-function); top: var(--top);" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div><!--astro:end--></astro-island> </div><div class="d_flex flex_column gap_3"> <p class="text textStyle_md md:textStyle_sm font_semibold text_capitalize">Styling</p> <astro-island uid="1COA4T" prefix="r14" component-url="/_astro/sidebar-group.pYL0hH5E.js" component-export="SidebarGroup" renderer-url="/_astro/client.6N_nQQgG.js" props="{"items":[1,[[0,{"title":[0,"Overview"],"href":[0,"/docs/styling/overview"]}],[0,{"title":[0,"Panda"],"href":[0,"/docs/styling/panda"]}],[0,{"title":[0,"Tailwind"],"href":[0,"/docs/styling/tailwind"]}],[0,{"title":[0,"Vanilla"],"href":[0,"/docs/styling/vanilla"]}]]],"data-astro-transition-persist":[0,"astro-pbta5uz2-2"]}" client="load" opts="{"name":"SidebarGroup","value":true}" data-astro-transition-persist="astro-pbta5uz2-2" await-children=""><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r14R0:" aria-labelledby="radio-group::r14R0::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/styling/overview" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r14R0::radio:/docs/styling/overview" for="radio-group::r14R0::radio:input:/docs/styling/overview" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r14R0::radio:control:/docs/styling/overview" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r14R0:" id="radio-group::r14R0::radio:input:/docs/styling/overview" type="radio" name=":r14R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/styling/overview"><span data-scope="segment-group" data-part="item-text" id="radio-group::r14R0::radio:label:/docs/styling/overview" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Overview</div></span></label></a><a href="https://ark-ui.com/docs/styling/panda" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r14R0::radio:/docs/styling/panda" for="radio-group::r14R0::radio:input:/docs/styling/panda" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r14R0::radio:control:/docs/styling/panda" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r14R0:" id="radio-group::r14R0::radio:input:/docs/styling/panda" type="radio" name=":r14R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/styling/panda"><span data-scope="segment-group" data-part="item-text" id="radio-group::r14R0::radio:label:/docs/styling/panda" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Panda</div></span></label></a><a href="https://ark-ui.com/docs/styling/tailwind" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r14R0::radio:/docs/styling/tailwind" for="radio-group::r14R0::radio:input:/docs/styling/tailwind" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r14R0::radio:control:/docs/styling/tailwind" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r14R0:" id="radio-group::r14R0::radio:input:/docs/styling/tailwind" type="radio" name=":r14R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/styling/tailwind"><span data-scope="segment-group" data-part="item-text" id="radio-group::r14R0::radio:label:/docs/styling/tailwind" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tailwind</div></span></label></a><a href="https://ark-ui.com/docs/styling/vanilla" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r14R0::radio:/docs/styling/vanilla" for="radio-group::r14R0::radio:input:/docs/styling/vanilla" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r14R0::radio:control:/docs/styling/vanilla" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r14R0:" id="radio-group::r14R0::radio:input:/docs/styling/vanilla" type="radio" name=":r14R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/styling/vanilla"><span data-scope="segment-group" data-part="item-text" id="radio-group::r14R0::radio:label:/docs/styling/vanilla" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Vanilla</div></span></label></a><div id="radio-group::r14R0::indicator" data-scope="segment-group" data-part="indicator" hidden="" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: var(--transition-duration, 150ms); transition-timing-function: var(--transition-timing-function); top: var(--top);" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div><!--astro:end--></astro-island> </div><div class="d_flex flex_column gap_3"> <p class="text textStyle_md md:textStyle_sm font_semibold text_capitalize">Components</p> <astro-island uid="Z1S9zqa" prefix="r15" component-url="/_astro/sidebar-group.pYL0hH5E.js" component-export="SidebarGroup" renderer-url="/_astro/client.6N_nQQgG.js" props="{"items":[1,[[0,{"title":[0,"Accordion"],"href":[0,"/docs/components/accordion"],"label":[0]}],[0,{"title":[0,"Avatar"],"href":[0,"/docs/components/avatar"],"label":[0]}],[0,{"title":[0,"Carousel"],"href":[0,"/docs/components/carousel"],"label":[0]}],[0,{"title":[0,"Checkbox"],"href":[0,"/docs/components/checkbox"],"label":[0]}],[0,{"title":[0,"Progress - Circular"],"href":[0,"/docs/components/circular-progress"],"label":[0,"preview"]}],[0,{"title":[0,"Color Picker"],"href":[0,"/docs/components/color-picker"],"label":[0,"preview"]}],[0,{"title":[0,"Combobox"],"href":[0,"/docs/components/combobox"],"label":[0]}],[0,{"title":[0,"Context Menu"],"href":[0,"/docs/components/context-menu"],"label":[0]}],[0,{"title":[0,"Date Picker"],"href":[0,"/docs/components/date-picker"],"label":[0]}],[0,{"title":[0,"Date Range Picker"],"href":[0,"/docs/components/date-range-picker"],"label":[0]}],[0,{"title":[0,"Dialog"],"href":[0,"/docs/components/dialog"],"label":[0]}],[0,{"title":[0,"Editable"],"href":[0,"/docs/components/editable"],"label":[0]}],[0,{"title":[0,"Environment"],"href":[0,"/docs/components/environment"],"label":[0]}],[0,{"title":[0,"File Upload"],"href":[0,"/docs/components/file-upload"],"label":[0,"preview"]}],[0,{"title":[0,"Hover Card"],"href":[0,"/docs/components/hover-card"],"label":[0]}],[0,{"title":[0,"Progress - Linear"],"href":[0,"/docs/components/linear-progress"],"label":[0,"preview"]}],[0,{"title":[0,"Menu"],"href":[0,"/docs/components/menu"],"label":[0]}],[0,{"title":[0,"Nested Menu"],"href":[0,"/docs/components/nested-menu"],"label":[0]}],[0,{"title":[0,"Number Input"],"href":[0,"/docs/components/number-input"],"label":[0]}],[0,{"title":[0,"Pagination"],"href":[0,"/docs/components/pagination"],"label":[0]}],[0,{"title":[0,"Pin Input"],"href":[0,"/docs/components/pin-input"],"label":[0]}],[0,{"title":[0,"Popover"],"href":[0,"/docs/components/popover"],"label":[0]}],[0,{"title":[0,"Presence"],"href":[0,"/docs/components/presence"],"label":[0]}],[0,{"title":[0,"Radio Group"],"href":[0,"/docs/components/radio-group"],"label":[0]}],[0,{"title":[0,"Range Slider"],"href":[0,"/docs/components/range-slider"],"label":[0]}],[0,{"title":[0,"Rating Group"],"href":[0,"/docs/components/rating-group"],"label":[0]}],[0,{"title":[0,"Segment Group"],"href":[0,"/docs/components/segment-group"],"label":[0]}],[0,{"title":[0,"Select"],"href":[0,"/docs/components/select"],"label":[0]}],[0,{"title":[0,"Slider"],"href":[0,"/docs/components/slider"],"label":[0]}],[0,{"title":[0,"Splitter"],"href":[0,"/docs/components/splitter"],"label":[0,"preview"]}],[0,{"title":[0,"Switch"],"href":[0,"/docs/components/switch"],"label":[0]}],[0,{"title":[0,"Tabs"],"href":[0,"/docs/components/tabs"],"label":[0]}],[0,{"title":[0,"Tags Input"],"href":[0,"/docs/components/tags-input"],"label":[0]}],[0,{"title":[0,"Toast"],"href":[0,"/docs/components/toast"],"label":[0]}],[0,{"title":[0,"Toggle Group"],"href":[0,"/docs/components/toggle-group"],"label":[0]}],[0,{"title":[0,"Tooltip"],"href":[0,"/docs/components/tooltip"],"label":[0]}],[0,{"title":[0,"Tree View"],"href":[0,"/docs/components/tree-view"],"label":[0,"upcoming"]}]]],"data-astro-transition-persist":[0,"astro-pbta5uz2-3"]}" client="load" opts="{"name":"SidebarGroup","value":true}" data-astro-transition-persist="astro-pbta5uz2-3" await-children=""><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r15R0:" aria-labelledby="radio-group::r15R0::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/components/accordion" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/accordion" for="radio-group::r15R0::radio:input:/docs/components/accordion" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/accordion" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/accordion" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/accordion"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/accordion" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Accordion</div></span></label></a><a href="https://ark-ui.com/docs/components/avatar" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/avatar" for="radio-group::r15R0::radio:input:/docs/components/avatar" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/avatar" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/avatar" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/avatar"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/avatar" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Avatar</div></span></label></a><a href="https://ark-ui.com/docs/components/carousel" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/carousel" for="radio-group::r15R0::radio:input:/docs/components/carousel" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/carousel" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/carousel" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/carousel"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/carousel" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Carousel</div></span></label></a><a href="https://ark-ui.com/docs/components/checkbox" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/checkbox" for="radio-group::r15R0::radio:input:/docs/components/checkbox" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/checkbox" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/checkbox" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/checkbox"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/checkbox" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Checkbox</div></span></label></a><a href="https://ark-ui.com/docs/components/circular-progress" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/circular-progress" for="radio-group::r15R0::radio:input:/docs/components/circular-progress" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/circular-progress" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/circular-progress" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/circular-progress"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/circular-progress" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Progress - Circular<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/color-picker" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/color-picker" for="radio-group::r15R0::radio:input:/docs/components/color-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/color-picker" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/color-picker" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/color-picker"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/color-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Color Picker<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/combobox" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/combobox" for="radio-group::r15R0::radio:input:/docs/components/combobox" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/combobox" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/combobox" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/combobox"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/combobox" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Combobox</div></span></label></a><a href="https://ark-ui.com/docs/components/context-menu" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/context-menu" for="radio-group::r15R0::radio:input:/docs/components/context-menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/context-menu" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/context-menu" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/context-menu"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/context-menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Context Menu</div></span></label></a><a href="https://ark-ui.com/docs/components/date-picker" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/date-picker" for="radio-group::r15R0::radio:input:/docs/components/date-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/date-picker" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/date-picker" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/date-picker"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/date-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Date Picker</div></span></label></a><a href="https://ark-ui.com/docs/components/date-range-picker" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/date-range-picker" for="radio-group::r15R0::radio:input:/docs/components/date-range-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/date-range-picker" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/date-range-picker" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/date-range-picker"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/date-range-picker" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Date Range Picker</div></span></label></a><a href="https://ark-ui.com/docs/components/dialog" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/dialog" for="radio-group::r15R0::radio:input:/docs/components/dialog" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/dialog" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/dialog" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/dialog"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/dialog" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Dialog</div></span></label></a><a href="https://ark-ui.com/docs/components/editable" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/editable" for="radio-group::r15R0::radio:input:/docs/components/editable" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/editable" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/editable" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/editable"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/editable" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Editable</div></span></label></a><a href="https://ark-ui.com/docs/components/environment" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/environment" for="radio-group::r15R0::radio:input:/docs/components/environment" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/environment" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/environment" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/environment"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/environment" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Environment</div></span></label></a><a href="https://ark-ui.com/docs/components/file-upload" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/file-upload" for="radio-group::r15R0::radio:input:/docs/components/file-upload" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/file-upload" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/file-upload" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/file-upload"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/file-upload" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">File Upload<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/hover-card" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/hover-card" for="radio-group::r15R0::radio:input:/docs/components/hover-card" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/hover-card" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/hover-card" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/hover-card"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/hover-card" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Hover Card</div></span></label></a><a href="https://ark-ui.com/docs/components/linear-progress" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/linear-progress" for="radio-group::r15R0::radio:input:/docs/components/linear-progress" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/linear-progress" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/linear-progress" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/linear-progress"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/linear-progress" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Progress - Linear<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/menu" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/menu" for="radio-group::r15R0::radio:input:/docs/components/menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/menu" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/menu" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/menu"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Menu</div></span></label></a><a href="https://ark-ui.com/docs/components/nested-menu" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/nested-menu" for="radio-group::r15R0::radio:input:/docs/components/nested-menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/nested-menu" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/nested-menu" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/nested-menu"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/nested-menu" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Nested Menu</div></span></label></a><a href="https://ark-ui.com/docs/components/number-input" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/number-input" for="radio-group::r15R0::radio:input:/docs/components/number-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/number-input" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/number-input" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/number-input"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/number-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Number Input</div></span></label></a><a href="https://ark-ui.com/docs/components/pagination" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/pagination" for="radio-group::r15R0::radio:input:/docs/components/pagination" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/pagination" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/pagination" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/pagination"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/pagination" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Pagination</div></span></label></a><a href="https://ark-ui.com/docs/components/pin-input" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/pin-input" for="radio-group::r15R0::radio:input:/docs/components/pin-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/pin-input" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/pin-input" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/pin-input"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/pin-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Pin Input</div></span></label></a><a href="https://ark-ui.com/docs/components/popover" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/popover" for="radio-group::r15R0::radio:input:/docs/components/popover" data-state="checked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/popover" aria-hidden="true" data-state="checked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/popover" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/popover" checked=""><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/popover" data-state="checked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Popover</div></span></label></a><a href="https://ark-ui.com/docs/components/presence" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/presence" for="radio-group::r15R0::radio:input:/docs/components/presence" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/presence" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/presence" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/presence"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/presence" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Presence</div></span></label></a><a href="https://ark-ui.com/docs/components/radio-group" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/radio-group" for="radio-group::r15R0::radio:input:/docs/components/radio-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/radio-group" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/radio-group" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/radio-group"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/radio-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Radio Group</div></span></label></a><a href="https://ark-ui.com/docs/components/range-slider" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/range-slider" for="radio-group::r15R0::radio:input:/docs/components/range-slider" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/range-slider" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/range-slider" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/range-slider"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/range-slider" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Range Slider</div></span></label></a><a href="https://ark-ui.com/docs/components/rating-group" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/rating-group" for="radio-group::r15R0::radio:input:/docs/components/rating-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/rating-group" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/rating-group" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/rating-group"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/rating-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Rating Group</div></span></label></a><a href="https://ark-ui.com/docs/components/segment-group" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/segment-group" for="radio-group::r15R0::radio:input:/docs/components/segment-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/segment-group" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/segment-group" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/segment-group"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/segment-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Segment Group</div></span></label></a><a href="https://ark-ui.com/docs/components/select" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/select" for="radio-group::r15R0::radio:input:/docs/components/select" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/select" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/select" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/select"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/select" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Select</div></span></label></a><a href="https://ark-ui.com/docs/components/slider" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/slider" for="radio-group::r15R0::radio:input:/docs/components/slider" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/slider" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/slider" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/slider"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/slider" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Slider</div></span></label></a><a href="https://ark-ui.com/docs/components/splitter" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/splitter" for="radio-group::r15R0::radio:input:/docs/components/splitter" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/splitter" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/splitter" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/splitter"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/splitter" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Splitter<div class="badge badge--variant_subtle badge--size_sm">preview</div></div></span></label></a><a href="https://ark-ui.com/docs/components/switch" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/switch" for="radio-group::r15R0::radio:input:/docs/components/switch" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/switch" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/switch" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/switch"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/switch" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Switch</div></span></label></a><a href="https://ark-ui.com/docs/components/tabs" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/tabs" for="radio-group::r15R0::radio:input:/docs/components/tabs" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/tabs" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/tabs" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/tabs"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/tabs" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tabs</div></span></label></a><a href="https://ark-ui.com/docs/components/tags-input" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/tags-input" for="radio-group::r15R0::radio:input:/docs/components/tags-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/tags-input" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/tags-input" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/tags-input"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/tags-input" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tags Input</div></span></label></a><a href="https://ark-ui.com/docs/components/toast" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/toast" for="radio-group::r15R0::radio:input:/docs/components/toast" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/toast" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/toast" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/toast"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/toast" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Toast</div></span></label></a><a href="https://ark-ui.com/docs/components/toggle-group" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/toggle-group" for="radio-group::r15R0::radio:input:/docs/components/toggle-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/toggle-group" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/toggle-group" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/toggle-group"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/toggle-group" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Toggle Group</div></span></label></a><a href="https://ark-ui.com/docs/components/tooltip" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/tooltip" for="radio-group::r15R0::radio:input:/docs/components/tooltip" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/tooltip" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/tooltip" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/tooltip"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/tooltip" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tooltip</div></span></label></a><a href="https://ark-ui.com/docs/components/tree-view" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r15R0::radio:/docs/components/tree-view" for="radio-group::r15R0::radio:input:/docs/components/tree-view" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r15R0::radio:control:/docs/components/tree-view" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r15R0:" id="radio-group::r15R0::radio:input:/docs/components/tree-view" type="radio" name=":r15R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/components/tree-view"><span data-scope="segment-group" data-part="item-text" id="radio-group::r15R0::radio:label:/docs/components/tree-view" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">Tree View<div class="badge badge--variant_subtle badge--size_sm">upcoming</div></div></span></label></a><div id="radio-group::r15R0::indicator" data-scope="segment-group" data-part="indicator" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: 0ms; transition-timing-function: var(--transition-timing-function); top: var(--top); --left: 0px; --top: 0px; --width: 0px; --height: 0px;" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div><!--astro:end--></astro-island> </div><div class="d_flex flex_column gap_3"> <p class="text textStyle_md md:textStyle_sm font_semibold text_capitalize">Changelog</p> <astro-island uid="8o3dg" prefix="r16" component-url="/_astro/sidebar-group.pYL0hH5E.js" component-export="SidebarGroup" renderer-url="/_astro/client.6N_nQQgG.js" props="{"items":[1,[[0,{"title":[0,"react"],"href":[0,"/docs/changelog/react"]}],[0,{"title":[0,"solid"],"href":[0,"/docs/changelog/solid"]}],[0,{"title":[0,"vue"],"href":[0,"/docs/changelog/vue"]}]]],"data-astro-transition-persist":[0,"astro-pbta5uz2-4"]}" client="load" opts="{"name":"SidebarGroup","value":true}" data-astro-transition-persist="astro-pbta5uz2-4" await-children=""><div data-scope="segment-group" data-part="root" role="radiogroup" id="radio-group::r16R0:" aria-labelledby="radio-group::r16R0::label" data-orientation="vertical" aria-orientation="vertical" style="position:relative" class="segmentGroup__root segmentGroup__root--size_md md:segmentGroup__root--size_sm"><a href="https://ark-ui.com/docs/changelog/react" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r16R0::radio:/docs/changelog/react" for="radio-group::r16R0::radio:input:/docs/changelog/react" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r16R0::radio:control:/docs/changelog/react" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r16R0:" id="radio-group::r16R0::radio:input:/docs/changelog/react" type="radio" name=":r16R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/changelog/react"><span data-scope="segment-group" data-part="item-text" id="radio-group::r16R0::radio:label:/docs/changelog/react" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">react</div></span></label></a><a href="https://ark-ui.com/docs/changelog/solid" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r16R0::radio:/docs/changelog/solid" for="radio-group::r16R0::radio:input:/docs/changelog/solid" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r16R0::radio:control:/docs/changelog/solid" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r16R0:" id="radio-group::r16R0::radio:input:/docs/changelog/solid" type="radio" name=":r16R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/changelog/solid"><span data-scope="segment-group" data-part="item-text" id="radio-group::r16R0::radio:label:/docs/changelog/solid" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">solid</div></span></label></a><a href="https://ark-ui.com/docs/changelog/vue" style="display:flex;width:fit-content;text-transform:capitalize"><label data-scope="segment-group" data-part="item" id="radio-group::r16R0::radio:/docs/changelog/vue" for="radio-group::r16R0::radio:input:/docs/changelog/vue" data-state="unchecked" data-orientation="vertical" class="segmentGroup__item segmentGroup__item--size_md md:segmentGroup__item--size_sm"><div data-scope="segment-group" data-part="item-control" id="radio-group::r16R0::radio:control:/docs/changelog/vue" aria-hidden="true" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemControl segmentGroup__itemControl--size_md md:segmentGroup__itemControl--size_sm"></div><input data-ownedby="radio-group::r16R0:" id="radio-group::r16R0::radio:input:/docs/changelog/vue" type="radio" name=":r16R0:" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;word-wrap:normal" value="/docs/changelog/vue"><span data-scope="segment-group" data-part="item-text" id="radio-group::r16R0::radio:label:/docs/changelog/vue" data-state="unchecked" data-orientation="vertical" class="segmentGroup__itemText segmentGroup__itemText--size_md md:segmentGroup__itemText--size_sm"><div class="d_flex items_center gap_2 flex_row">vue</div></span></label></a><div id="radio-group::r16R0::indicator" data-scope="segment-group" data-part="indicator" hidden="" data-orientation="vertical" style="--transition-property: left, top, width, height; position: absolute; will-change: var(--transition-property); transition-property: var(--transition-property); transition-duration: var(--transition-duration, 150ms); transition-timing-function: var(--transition-timing-function); top: var(--top);" class="segmentGroup__indicator segmentGroup__indicator--size_md md:segmentGroup__indicator--size_sm"></div></div><!--astro:end--></astro-island> </div></div> </astro-slot></div></div></div><div id="popover::r66R0::popper" data-scope="popover" data-part="positioner" class="popover__positioner" style="position: absolute; isolation: isolate; min-width: max-content; top: 0px; left: 0px; transform: translate3d(0px, -100vh, 0px); z-index: var(--z-index);"><div data-scope="popover" data-part="content" id="popover::r66R0::content" tabindex="-1" role="dialog" hidden="" data-state="closed" aria-labelledby="popover::r66R0::title" aria-describedby="popover::r66R0::desc" class="popover__content"><div id="popover::r66R0::arrow" data-scope="popover" data-part="arrow" class="popover__arrow" style="position: absolute; width: var(--arrow-size); height: var(--arrow-size); --arrow-size-half: calc(var(--arrow-size) / 2); --arrow-offset: calc(var(--arrow-size-half) * -1);"><div data-scope="popover" data-part="arrow-tip" class="popover__arrowTip" style="background: var(--arrow-background); top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; z-index: inherit;"></div></div><div class="d_flex flex_column gap_1"><div data-scope="popover" data-part="title" id="popover::r66R0::title" class="popover__title">Favorite Framework</div><p data-scope="popover" data-part="description" id="popover::r66R0::desc" class="popover__description">Tell us what is your favorite framework and why you love to use it.</p></div><div class="pos_absolute top_1 right_1"><button aria-label="Close Popover" data-scope="popover" data-part="close-trigger" id="popover::r66R0::close" type="button" class="iconButton iconButton--variant_ghost iconButton--size_sm popover__closeTrigger"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x "><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div></div></div></body></html>